Responsive Diamond Grid

Question

Responsive Diamond Grid

Navigation

#1 by (1 votes)

1

I'm trying to make a diamond grid but they do not get it for some reason, before it was an error and now it no longer has the error and it still does not work

body{
    margin: 0;
    padding: 0;
    background: #000;
}
.diamond-grid{
    width: 70%;
    margin: 150px auto 0;
    
}
.item{
    width: 220px;
    height: 220px;
    transition: 0.5s;
    background: #fff;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css.css">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script><scripttype="text/javascript" src="jquery.diamonds.js"></script>
  <link rel="stylesheet" type="text/css" href="diamonds.css" />
</head>


<body>
  <div class="diamond-grid"></div>
  <div class="item"><img src="img/calopsita.jpg"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <script>
    $("#diamond-grid").diamonds({
      size: 200, // Size of diamonds in pixels. Both width and height. 
      gap: 5, // Pixels between each square.
      hideIncompleteRow: false, // Hide last row if there are not enough items to fill it completely.
      autoRedraw: true, // Auto redraw diamonds when it detects resizing.
      itemSelector: ".item" // the css selector to use to select diamonds-items.
    });
  </script>
</body>

html css

asked by anonymous 27.10.2018 / 19:38

1 answer

INNER JOIN in 4 tables Query mysql in phpmyadmin

score 1 · Accepted Answer

Very simple Lincoln, in your JS code you're calling the diamond grid in an element with id equal diamond-grid but in your HTML > you have no element with id but a class diamond-grid , so change this:

$("#diamond-grid").diamonds({...    // aqui está chamando por um id

For this reason:

$(".diamond-grid").diamonds({...    // aqui chamará por classe

For more clarification on how to use each of these selectors you can see these links:

id
class