Kombinationer af række- og søjlesammenslutninger i CSS grids
Lad os se på forskellige typer af række- og søjlesammenslutninger.
Eksempel
Lad os lave en tabel ved at kombinere
egenskaberne grid-column
og grid-row:
<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: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 3;
}
#elem2 {
grid-row: 1 / 2;
}
#elem3 {
grid-row: 1 / 2;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
:
Eksempel
Og lad os nu gøre så den første og fjerde blok optager hele rækken, den anden blok - to rækker og to søjler, og den tredje og fjerde blok - én række og to søjler:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
#elem4 {
grid-row: 3 / 3;
grid-column: 2 / 4;
}
#elem5 {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
:
Eksempel
Lad os gøre så det første element i tabellen optager alle søjlerne på første række, og de resterende elementer placeres på anden række, hvor de optager lige brede søjler:
<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: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Eksempel
Lad os ændre det forrige eksempel så det andet element optager en søjle, der er tre gange bredere end søjlerne for det tredje og fjerde element:
<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 {
height: 300px;
width: 400px;
display: grid;
grid-template-columns: 3fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Eksempel
Lad os nu placere to elementer på første række, hvor vi giver hver forskellig søjlebredde:
<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: repeat(4, 1fr);
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 1 / 2;
grid-column: 4 / 5;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 1 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 5;
}
:
Eksempel
Lad os nu have en tabel, der består af fem elementer. Lad os placere det første element på øverste række, og alle de andre - på anden række:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 2px solid #696989;
padding: 10px;
height: 300px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
#elem5 {
grid-row: 2 / 3;
grid-column: 4 / 5;
}
:
Praktiske opgaver
Placer alle elementer i overensstemmelse med følgende eksempel:
Placer alle elementer i overensstemmelse med følgende eksempel:
