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:

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-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:

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 id="elem5">5</div>
</div>

css#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:

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-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:

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 {
  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:

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-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:

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 id="elem5">5</div>
</div>

css#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