Přes více sloupců
Box s novinkami sedí v jedné buňce třetího řádku a buňka vedle něj je prázdná. Mnohem lépe by vypadal přes celou šířku mřížky.
V kurzu CSS jste položku mřížky roztáhli přes víc sloupců pomocí grid-column: span 2. V Tailwindu jsou na to tyto třídy:
| Třída | CSS | Položka bude… |
|---|---|---|
col-span-2 | grid-column: span 2 / span 2; | široká dva sloupce |
col-span-full | grid-column: 1 / -1; | široká jako všechny sloupce |
row-span-2 | grid-row: span 2 / span 2; | vysoká dva řádky |
span 2 / span 2 znamená totéž co span 2: Tailwind ho jen píše pro začátek i konec položky.
Položka také může začínat nebo končit na určité čáře mřížky: col-start-2 je grid-column-start: 2 a col-end-4 je grid-column-end: 4. Čáry se číslují od 1, jak víte.
Jak psát:
"Shift + ů
:Shift + .
/Shift + ú
<Alt Gr + ,
>Alt Gr + .
[Alt Gr + f
]Alt Gr + g
{Alt Gr + b
}Alt Gr + n
#Alt Gr + x
@Alt Gr + v
Pokyny
Přidejte boxu s novinkami (oranžovému prvku div pod kartami) třídu col-span-2. Teď zabírá oba sloupce.
Začněte programovat zdarma
7/11