Dimensiunile gridurilor implicite în CSS

Gridul implicit determină singur dimensiunile acelor elemente, care ies în afara limitelor sale. Cu toate acestea, la nevoie, aceste dimensiuni pot fi setate folosind proprietățile grid-auto-columns și grid-auto-rows.

Să facem acest lucru:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
  
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}
#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

Результат: