Eienskap grid-template-areas

Die eienskap grid-template-areas spesifiseer die plasing van elemente in 'n rooster. Eerstens word 'n naam vir elke kindelement toegeken deur die eienskap grid-area te gebruik. Dan wys ons in die ouerelement die eienskap grid-template-areas aan, waarin ons die name van die kindelemente lys in die volgorde waarin ons hulle in die rooster wil plaas.

Sintaksis

cssselektor {
  grid-template-areas: name van kindelemente;
}

Voorbeeld

Kom ons spesifiseer die posisie van ons elemente in die rooster:

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

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}

#parent {
  display: grid;
  grid-template-areas: 'second first third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Voorbeeld

En nou, laat ons in plaas van die name van sommige elemente die punt '.' spesifiseer. Soos gesien kan word uit die resultaat van die uitgevoerde kode, sal 'n leë blok in hierdie geval in die skema geplaas word:

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

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}
#parent {
  display: grid;
  grid-template-areas: 'first . second third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Sien ook