Διαστάσεις των Άυλων Πλεγμάτων στο CSS

Το άυλο πλέγμα καθορίζει αυτόματα τα μεγέθη των στοιχείων που βγαίνουν έξω από τα όριά του. Ωστόσο, αν χρειαστεί, αυτά τα μεγέθη μπορούν να οριστούν χρησιμοποιώντας τις ιδιότητες grid-auto-columns και grid-auto-rows.

Ας το κάνουμε:

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;
}

Результат: