CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jaume Sastre
Jaume Sastre

Reputation: 55

Create grid in HTML

I'm looking to create a grid like this: Grid

I'm using this:

$(document).ready(function() {
    for (var i = 0; i < 366; i++) {
        $('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
    }
});

to generate 365 divs, then, with CSS, create the 'grid' style. 

.dia {
      width: 45px;
      height: 45px;
      background: white;
      outline: 2px solid;
      float: left;
  }

  .div-padre {
      width: 800px;
  }

I tried to clearfix but the last div goes wrong, I don't care if they are divs, tr or whatever, but in the future i would like to select one square and change color, so div or tr or something, I need you to be able to do that later

Upvotes: 2

Views: 447

Answers (2)

Gabriel Rodrigues
Gabriel Rodrigues

Reputation: 143

Use border: 2px solid; margin: -1px; instead of outline: 2px solid;

$(document).ready(function() {
    for (var i = 0; i < 365; i++) {
        $('#div-padre')
        .append(
        	$('<div>', {
          	id: 'div-' + (i+1),
            class: 'dia'
          }));
    }
});
.dia {
  width: 45px;
  height: 45px;
  background: white;
  border: 2px solid;
  margin: -1px;
  float: left;
}

.div-padre {
  width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

This is a border/outline management issue, take a look at this:

$(document).ready(function() {
    for (var i = 0; i < 366; i++) {
        $('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
    }
});
.dia {
      width: 45px;
      height: 45px;
      background: white;
      border: 2px solid;
      float: left;
      margin-top:-2px;
      margin-left:-2px;
  }

  .div-padre {
      width: 800px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>

Upvotes: 2

Related Questions