CSS Gridi omaduste lühendatud vorm
Omadus grid on
lühendatud vorm kõikide gridi konteineri veergude
ja ridade omaduste kirjutamiseks. Kõik
väärtused kirjutatakse ühes reas kaldkriipsu kaudu.
grid abil saab ühes reas kirjeldada
ainult üht tüüpi omadusi -
selgesõnalised (grid-template-rows,
grid-template-columns,
grid-template-areas)
või kaudsed (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
Need omadused, mis
jäid määramata,
saavad vaikeväärtused.
Näide
Loome tabeli
kasutades omadust grid:
<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;
}
:
Näide
Nüüd määrame teisele ja kolmandale reale sama kõrguse, ning igale veerule - erineva laiuse:
<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;
}
:
Näide
Nüüd teeme eelmise näite tabelis ülemise rea laiuseks kaks fraktsiooni, ja esimese veeru - pooleks fraktsiooniks:
<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;
}
:
Praktilised ülesanded
Realiseerige järgmine näide:
Realiseerige järgmine näide:
Realiseerige järgmine näide: