CSS GRID kaip padaryti tokį išdėstymą

Sveiki, mokausi CSS GRID dabar ir yra tokia užduotis, kaip be grid-row padaryti tokį išdėstymą?

Sveiki, mokausi CSS GRID dabar ir yra tokia užduotis, kaip be grid-row padaryti tokį išdėstymą?

grid-template-areas

grid-template-areas

Bet tai tikrai nėra lengvas būdas, nes tada kiekvienam elementui turi priskirti klase ir jas dėlioti, čia tirkai nėra paprastas ir greitas sprendimas

tiesiog naudok bootstrap'a

tiesiog naudok bootstrap'a

šiais laikas kažkas dar kažkas boostrapą naudoja? :D

Na pabandžiau sudėlioti, labai įdomiai, kad negalima naudoti grid-row. Teko naudoti kelias skirtingas grid-template-column, bet kažką geriau sunku ir sugalvoti.

https://stackblitz.com/edit/js-ids4qg?file=style.css

Jei tik mokaisi dėl įdomumo, tai labai cool, bet visgi reliai vien tik grid layouto'o nenaudosi, dažniausiai miksuosi su flexbox'u, tai rekomenduoju ir flexbox'o nepamiršti ir pabandyti pamiksuoti kartu su grid layout'u.

šiais laikas kažkas dar kažkas boostrapą naudoja? :D

o kas čia blogo? Labai patogus kai reikia kokį LP sukalti. Kas čia tokio atsirado geresnio?

šiais laikas kažkas dar kažkas boostrapą naudoja? :D

Gal siūlai alternatyvą jam? Nes esu pradedantysis front-end programuotojas, tai gal ką nors pasiūlysi?

Na pabandžiau sudėlioti, labai įdomiai, kad negalima naudoti grid-row. Teko naudoti kelias skirtingas grid-template-column, bet kažką geriau sunku ir sugalvoti.

 

https://stackblitz.c...?file=style.css

 

Jei tik mokaisi dėl įdomumo, tai labai cool, bet visgi reliai vien tik grid layouto'o nenaudosi, dažniausiai miksuosi su flexbox'u, tai rekomenduoju ir flexbox'o nepamiršti ir pabandyti pamiksuoti kartu su grid layout'u.

grid-row veikia, bet reikia kartu pridėti ir grid-column. P.S galima pasidaryti klases (pvz. span-2, kas užimtų 2fr ir t.t.). Arba kiekvienam elementui priskirti unikalią klasę ir jai uždėti stilių atitinkamą.