CSS Roster-eienskap verkorte weergave
Die grid eenskap is 'n verkorte vorm om alle
kolom- en ry-eienskappe van die roosterhouer te definieer.
Alle waardes word in een lyn geskryf, geskei deur 'n skuinsstreep.
Met grid kan slegs een tipe eienskappe in een lyn beskryf word -
eksplisiete (grid-template-rows,
grid-template-columns,
grid-template-areas)
of implisiete (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
Die eienskappe wat nie
aangegee word nie,
neem hul verstekwaardes aan.
Voorbeeld
Kom ons maak 'n tabel
met die grid eenskap:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Voorbeeld
En nou, laat ons die tweede en derde rye dieselfde hoogte gee, en elke kolom 'n verskillende wydte:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Voorbeeld
En nou, in die tabel van die vorige voorbeeld, laat ons die boonste ry 'n hoogte van twee fraksies gee, en die eerste kolom 'n hoogte van 'n halwe fraksie:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Praktiese take
Implementeer die volgende voorbeeld:
Implementeer die volgende voorbeeld:
Implementeer die volgende voorbeeld:
