CODEWITHSUNDEEP
htmlcsscss-grid
user736893
user736893

Reputation:

CSS grid of squares with dynamic height?

Full example here: https://codepen.io/ScottBeeson/pen/BmxLxL

$('#btnAddBox').on('click', function() {
  $('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click', function() {
  $('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})
body {
  margin: 40px;
}

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  display: grid;
  grid-template-rows: 23px;
  grid-auto-rows: 23px;
  grid-template-columns: repeat(4, 23px);
  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 0px;
  font-size: 100%;
}

#btnAddBox {
  position: absolute;
  top: 5px;
  left: 105px;
  cursor: pointer;
  background-color: gray;
  color: white;
  padding: 4px;
}

#btnReset {
  position: absolute;
  top: 35px;
  left: 105px;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>

I'm using CSS Grid for a dashboard. It will be possible to add and remove tiles. Right now I'm using the following to create a grid of squares:

grid-template-rows: repeat(30, 23px);
grid-template-columns: repeat(4, 23px);

This works, but if I add or remove tiles the height of the wrapper does not adjust accordingly. How can I do that?

Upvotes: 3

Views: 626

Answers (1)

Nandu Kalidindi
Nandu Kalidindi

Reputation: 6280

You can use grid-auto-rows. This will not require you to specify the number of rows beforehand like grid-template-rows. That makes it auto adjust as the size keeps increasing.

Since your columns are fixed you can use grid-template-columns with repeat(4). If you wanted to increase columns then you can achieve it in a similar way using grid-auto-columns.

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0; left: 0; width: 100px;
  display: grid;

  /* Added these */
  grid-template-columns: repeat(4, 23px);
  grid-auto-rows: 23px;
  /* Added these */      

  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}


$('#btnAddBox').on('click',function() {
  $('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click',function() {
  $('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})
body {
  margin: 40px;
}

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0; left: 0; width: 100px;
  display: grid;
  
  grid-template-columns: repeat(4, 23px);
  grid-auto-rows: 23px;
  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 0px;
  font-size: 100%;
}

#btnAddBox {
  position: absolute;
  top: 5px; left: 105px;
  cursor: pointer;
  background-color: gray;
  color: white;
  padding: 4px;
}
#btnReset {
  position: absolute;
  top: 35px; left: 105px;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>

Upvotes: 2

Related Questions