Implisitte grids i CSS
Implisitt grid opprettes automatisk av nettleseren når antall elementer ikke passer inn i det eksplisitte gridet. La oss se hvordan dette skjer.
Anta at vi har fire blokker:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem3">4</div>
</div>
Anta at gridet vårt har dimensjoner
3 på 3:
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
La oss plassere tre av blokkene våre i gridet:
#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;
}
Og den fjerde blokken plasserer vi i fjerde rad og kolonne:
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
Siden gridet vårt har en størrelse på
3 på 3, vil det ikke
finnes noen fjerde rad og kolonne i dette
gridet. Men de vil ikke være tilstede i eksplisitt form,
det vil si i den formen vi har definert. Men nettleseren
vil opprette dem implisitt, det vil si av seg selv.
Samtidig, siden vi kun spesifiserte dimensjoner for det eksplisitte gridet, vil dimensjonene for celler utenfor dette gridet blitt beregnet av nettleseren. Det vil si at i vårt tilfelle vil dimensjonene for den fjerde blokken bli satt automatisk av nettleseren.
La oss se hva vi får:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
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;
}
:
Anta at du har 6 blokker i gridet ditt.
Plasser 3 blokker i det eksplisitte
gridet, og tre blokker i det implisitte.
