CSS tinklelio išdėstymo įvadas (su pavyzdžiais)

„CSS Grid“ perėmė interneto dizaino pasaulį. Tai tikrai šaunu. Internete yra daugybė vadovėlių, tinklaraščių ir straipsnių, kurie yra puikūs žinių šaltiniai.

Tačiau dauguma jų moko pagrindų, pateikdami labai nedaug realių pavyzdžių. Taigi šiame vadove mes pažvelgsime į pavyzdžius, kai mokysimės.

Kas yra tinklelis?

„CSS Grid“ leidžia mums rašyti geresnius maketus, naudojant tinklelių galimybes naršyklėje. Prieš „CSS Grid“ mes turėjome naudoti savo pasirinktą tinklelio sistemą arba kažką panašaus į „Bootstrap“.

Šios kitos parinktys veikia gerai, tačiau CSS tinklelis pašalina skausmą iš daugelio dalykų, su kuriais susidūrėme taikydami šiuos sprendimus.

„CSS Grid“ yra paprastas ir sudėtingas išdėstymas, todėl tai yra tortas. Šiame tinklaraštyje sužinosime keletą pagrindinių terminų ir pateiksime paprastą maketo pavyzdį.

Pagrindinės terminijos

Pagrindiniai terminai, susieti su CSS tinkleliu, yra šie:

  1. Stulpeliai
  2. Eilutės
  3. Ląstelės
  4. Tinklelio linijos
  5. Latakas

Visi terminai paaiškinti aukščiau pateiktoje diagramoje. Šis pavyzdys yra 3x2 stulpelių tinklelis, kuris reiškia 3 stulpelius ir 2 eilutes.

Maketo pavyzdys

Dabar, kai pagrindinių koncepcijų nėra, mes naudosime šias sąvokas, kad sudarytume pavyzdinį išdėstymą, kaip nurodyta toliau:

Kaip matote, yra antraštė ir poraštė. Tada centrinėje eilutėje yra 3 stulpeliai su navigacija pirmoje stulpelio šoninėje juostoje dešinėje, o pagrindinis turinio plotas - centre (kuris užima didžiąją eilutės dalį).

Žemiau pateikiamas šio pavyzdžio HTML pavyzdys.

 HEADER NAV CONTENTS ASIDE FOOTER 

Dabar, kai HTML yra mūsų kelias, įsigilinkime į CSS. Pirmiausia suteikime tam tikrą stilių, kad mūsų HTML atrodytų kaip pirmiau. Šios CSS taisyklės nėra CSS tinklelio dalis, todėl, jei norite, jų galite praleisti.

.wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; }

Kaip matote, aš formuoju visus daiktus, esančius įvyniojimo inde. Aš nustatant jo fono spalvą orangeir suteikti bottomir rightmargins.aš nustatant displayflextik suderinti daiktų rimties nustatant justify-contentir align-itemsį center.

Toliau eikime į jos CSS tinklelio dalį.

.wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; }

Pirmiau kodo fragmentą mes kuriame displaykad grid- taigi šios temos pavadinime. Taip mes konvertuojame konteinerį grid.

Toliau nustatome stulpelius ir eilutes. Tai atliksime naudodami grid-template-columnsir grid-template-rowssavybes. grid-template-columnsleidžia mums nustatyti stulpelių skaičių su atitinkamais width. grid-template-rowsleidžia mums nustatyti skaičių rowssu jų tinkamas height.

Aukščiau pateiktame pavyzdyje yra 3 stulpeliai su pirmojo stulpelio paėmimu 1 fraction, antrojo stulpelio paėmimu 5 fractionir trečiuoju stulpeliu 2 fractions. Vienas trupmenos vienetas reiškia „vienas gabalas iš bet kurio gabalo, į kurį mes jį padalijame“ .

Pažvelgus į tą patį pavyzdį aukščiau, taikoma ta pati sąvoka rows. Yra trys eilutės, o pirmoje eilutėje yra headervisa eilutė visuose trijuose stulpeliuose. Antroji eilutė nukreipia navigaciją, turinį ir šoną, o poraštė eina į trečią ir paskutinę eilutes ir užima visus tris stulpelius.

Tai reiškia, kad pirmoji ir paskutinė eilutės užima tą patį aukštį, t 5 fractions. Centrinė eilutė užima likusį likusį aukštį.

Toliau mes taip pat sukursime 10 pikselių lataką. Tai galime padaryti naudodamiesi grid-gapnuosavybe CSS tinklelyje . Galiausiai, mes nustatėme aukštį mūsų įvyniojimo konteineriui.

Pažvelgę ​​į tai naršyklėje, gausime ieškomą rezultatą:

Dabar atrodysime labiau, kaip norime, kad nustatytume kai kurias antraštės ir poraštės ypatybes. Mes ketiname pasakyti, kad antraštė ir poraštė užimtų visas jų eilutes.

Mes tai padaryti naudodami grid-column-startir grid-column-endsavybių, pavyzdžiui:

header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; }

Kaip matote, tiek antraštė, tiek poraštė prasideda nuo grid line1 ir baigiasi grid line4. Tai leidžia jiems užimti visas eiles. Tai suteiks tikslią mūsų ieškomą produkciją, kaip nurodyta toliau:

Užbaigti kodą

   CSS Grid  .wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; } header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; } .wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; } HEADER NAV CONTENTS ASIDE FOOTER 

Tai šiam straipsniui. Čia galite sekti mane, jei norite daugiau straipsnių. Jei jums patiko, nepamirškite pasidalinti ja socialiniuose tinkluose.