Sprievodca mriežkou CSS: Zvládnutie rozložení pomocou vlastností mriežky

Umiestňovanie prvkov na webovej stránke môže byť veľmi komplikované pri práci so zložitými rozloženiami. Tu príde vhod mriežka CSS. Ide o dispozičný systém navrhnutý tak, aby zjednodušil proces vytvárania zložitých dispozícií.

Ako vám to pomáha? Na rozdiel od tradičných metód rozloženia, ktoré vám umožňujú umiestniť prvky iba do riadkov alebo stĺpcov, mriežka CSS vám ponúka to najlepšie z oboch svetov – 2D prístup využívajúci riadky a stĺpce.

Mriežkové kontajnery a položky

Vlastnosti mriežky CSS môžete použiť na dva hlavné typy prvkov: rodič a deti. Keď nastavíte vlastnosť display na "grid" pre nadradený prvok, transformuje tento prvok na kontajner mriežky. Akýkoľvek podradený prvok v tomto kontajneri mriežky sa stane položkou mriežky, ktorá zdedí použité vlastnosti mriežky.

Tu je znázornené:

Položka mriežky sa môže stať aj mriežkovým kontajnerom. Teraz môžete na rozloženie odkazovať ako na vnorenú mriežku – mriežku v mriežke. Kontajner hlavnej mriežky sa teraz označuje ako vonkajšia mriežka, zatiaľ čo kontajner s mriežkou sa stáva vnútornou mriežkou.

Každá z týchto mriežok funguje nezávisle od druhej, čo znamená, že vlastnosti nastavené pre vnútornú mriežku neovplyvňujú rozloženie vonkajšej mriežky a naopak.

Takto to vyzerá:

Zvládnutie vzťahu medzi mriežkovými kontajnermi a položkami je nevyhnutné pre budovanie dvojrozmerných dispozícií efektívne.

Majte na pamäti, že existujú vlastnosti mriežky pre kontajnery mriežky, zatiaľ čo iné sú pre položky mriežky.

Mriežkové čiary a stopy

Skôr ako začnete používať mriežku CSS, mali by ste poznať dva kľúčové pojmy:

1. Mriežkové čiary: Čiary mriežky označujú vodorovné a zvislé čiary, ktoré tvoria mriežku v rozložení mriežky CSS. Špecifikujú začiatočné a koncové body riadkov a stĺpcov, čím pomáhajú organizovať, kde sa veci na mriežke pohybujú. Tieto čiary sú ako okraje krabíc; majú čísla, ktoré vám pomôžu odkazovať na prvky pri umiestňovaní. Tu ich znázorňuje červená prerušovaná čiara:
2. Mriežkové stopy: Sú to medzery medzi čiarami mriežky, ktoré definujú riadky a stĺpce. Sú ako stavebné kamene usporiadania mriežky. Na obrázku vyššie predstavuje farebná oblasť v rámci každej položky dráhu mriežky.

Predstavte si čiary mriežky a stopy ako stavebné bloky rozloženia mriežky, ako sú čiary na hárku milimetrového papiera. Keď sa horizontálna čiara mriežky pretína s čiarou vertikálnej mriežky, vytvorí bunku v tvare krabice. Tieto bunky fungujú ako kontajnery, do ktorých môžete umiestniť položky mriežky.

Vlastnosti kontajnera mriežky CSS

Toto sú vlastnosti, ktoré môžete použiť na kontajner mriežky na usporiadanie rozloženia a pomoc pri umiestňovaní prvkov v ňom. Ako už bolo spomenuté, jednou z nich je vlastnosť zobrazenia nastavená na mriežku. Tu sú ďalšie:

Šablóna mriežky

Táto vlastnosť definuje veľkosť riadkov a stĺpcov. Veľkosť týchto vlastností môžete nastaviť pomocou pixelov, percent alebo zlomkovej jednotky (fr). Môžete tiež použiť kľúčové slová ako auto, minmax(), a opakovať () zvýšiť flexibilitu.

• grid-template-rows: Nastaví výšku riadkov.
• mriežka-šablóna-stĺpce: Definuje šírky stĺpcov.

Tu je niekoľko príkladov:

Používanie pixelov:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Použitie percent:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Pomocou fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Používanie kľúčových slov auto a minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Použitie repeat() pre konzistentnú veľkosť:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automatické umiestnenie a oblasti šablón mriežky

Automatické umiestnenie: Automatické umiestňovanie je ako nechať mriežku rozhodnúť, kam umiestniť položky. Ak nešpecifikujete presné pozície, mriežka automaticky umiestni položky v poradí, v akom sa objavia v označení. Je to užitočné, keď máte veľa položiek a chcete, aby rovnomerne vyplnili mriežku.

Oblasti šablóny mriežky: Predstavte si oblasti šablón mriežky ako vytváranie rozloženia pomocou pomenovaných zón. Je to ako pomenovanie miestností na pôdoryse. Tieto názvy oblastí môžete použiť pri umiestňovaní položiek mriežky. Napríklad:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Toto rozloženie je ako mriežka s tromi stĺpcami a štyrmi riadkami. Pre oblasť hlavného obsahu sú dva riadky. Označené oblasti zahŕňajú „hlavičku“, „bočný panel“, „obsah“ a „pätu“. V ďalších častiach sa dozviete, ako používať tieto označenia oblastí vo vlastnostiach každej položky mriežky.

Zarovnanie v mriežke CSS

Vlastnosti zarovnania môžete použiť na ovládanie umiestnenia položiek mriežky v rámci ich buniek mriežky. Vlastnosti sú:

• zarovnať-položky: Riadi horizontálne zarovnanie položiek v rámci bunky mriežky.
  • hodnoty: začiatok, koniec, stred a úsek.
• align-items: Riadi vertikálne zarovnanie položiek v ich bunke mriežky.
  • hodnoty: začiatok, koniec, stred a úsek.
• ospravedlniť-obsah: Zarovná celú mriežku v kontajneri pozdĺž vodorovnej osi.
  • hodnoty: začiatok, koniec, stred, úsek, priestor medzi, priestor okolo a rovnomerný priestor.
• zarovnať-obsah: Zarovná celú mriežku v kontajneri pozdĺž zvislej osi.
  • hodnoty: začiatok, koniec, stred, úsek, priestor medzi, priestor okolo a rovnomerný priestor.

Tu je príklad:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

V tomto príklade sa položky vycentrujú horizontálne aj vertikálne vo svojich bunkách. Priestor bude rovnomerne rozdelený medzi stĺpce celej mriežky a mriežka sa v kontajneri vycentruje vertikálne.

Grid Gap

Medzera mriežky označuje priestor medzi riadkami a stĺpcami v rozložení mriežky. Pomáha vytvárať vizuálne oddelenie a pridáva určitý priestor medzi položky mriežky.

The grid-gap vlastnosť umožňuje nastaviť medzeru medzi riadkami a stĺpcami. Na jeho definovanie môžete použiť rôzne jednotky, ako sú pixely (px), percentá (%), jednotky em (em) a ďalšie.

.grid-container {
grid-gap: 20px;
}

V tomto príklade má mriežkový kontajner dva stĺpce s 20-pixelovou medzerou medzi nimi. Tento rozstup vizuálne oddeľuje stĺpce a zlepšuje rozloženie.

Vlastnosti položky mriežky CSS

Tu sú niektoré kľúčové vlastnosti, ktoré riadia správanie jednotlivých položiek mriežky v rozložení mriežky CSS, spolu s príkladmi:

grid-row-start a grid-row-end:

• Definuje začiatočný a koncový riadok pre položku.
• Hodnoty môžu byť čísla riadkov, „span n“ alebo „auto“.

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Tento kód miesta Položka mriežky 1 z riadku druhého radu do riadku štvrtého radu.

grid-column-start a grid-column-end:

• Definuje začiatočný a koncový riadok stĺpca pre položku.
• Hodnoty môžu byť čísla riadkov, "span n" alebo "auto".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Tento kód miesta Položka mriežky 2 od prvého stĺpcového riadku po tretí stĺpcový riadok.

grid-area:

• Určuje veľkosť a polohu položky mriežky v rámci mriežky odkazom na pomenované čiary mriežky grid-template-plochs.
• Ako už bolo spomenuté, preddefinované názvy oblastí sa už používajú s grid-template-plochs nehnuteľnosť. Tu je príklad, ako ho použiť spolu s grid-area.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Tu je výsledok:

ospravedlniť sa:

• Jednotlivé položky zarovná vodorovne vo svojej bunke.
• Hodnoty môžu byť začiatok, koniec, stred a úsek.

.grid-item-5 {
justify-self: center;
}

Tento kód horizontálne vycentruje Položka mriežky 5 vo svojej bunke.

zarovnať sa:

• Zarovnajte jednotlivé položky vertikálne v rámci svojej bunky.
• Hodnoty môžu byť začiatok, koniec, stred a úsek.

.grid-item-1 {
align-self: end;
}

Tento kód sa zarovná Položka mriežky 1 na dno svojej bunky.

Neváhajte kombinovať a prispôsobovať tieto vlastnosti, aby ste vytvorili požadované rozloženie a vzhľad pre každú položku mriežky vo vašej mriežke CSS.

Vytváranie responzívnych rozložení pomocou mriežok CSS

Použitie mriežok CSS na vytváranie responzívnych rozložení je dôležité zabezpečiť, aby sa vaša webová stránka bez problémov prispôsobila rôznym veľkostiam obrazovky a zariadeniam. Môžete použiť tieto metódy:

• Dotazy na médiá: Môžete použiť mediálne dopyty použiť rôzne rozloženia mriežky v závislosti od veľkosti obrazovky. Možno budete musieť napríklad zmeniť usporiadanie položiek mriežky alebo upraviť šírku stĺpcov pre menšie obrazovky.
• Flexibilné jednotky: Použite relatívne jednotky, ako sú percentá a fr, aby ste umožnili položkám mriežky a stĺpcom prispôsobiť sa proporcionálne dostupnému priestoru.
• minmax(): Použi minmax() funkcia na určenie rozsahu veľkostí stĺpcov alebo riadkov mriežky. Zabezpečuje, že položky sa na rôznych obrazovkách nebudú javiť príliš malé alebo príliš veľké.

Nezabudnite upraviť stĺpce a ďalšie prvky, ako sú medzery medzi položkami mriežky, veľkosti písma a okraje. Zabezpečuje konzistentné a dobre navrhnuté rozloženie, ktoré dobre funguje na rôznych zariadeniach.

Preskúmajte možnosti rozloženia mriežky CSS

Prijatie flexibility a výkonu mriežky CSS vám umožní vytvoriť rozloženia, ktoré nielen vyzerajú skvele, ale sa aj bez problémov prispôsobia požiadavkám moderného webového dizajnu. Ponorte sa teda do sveta mriežok, preskúmajte možnosti a zvýšte svoje zručnosti v oblasti vývoja webu.

Keď sa ponoríte do systémov rozloženia, možno budete chcieť porovnať iné metódy rozloženia s mriežkami CSS. Môžete tak urobiť pomocou modulu CSS Flexbox. To vám pomôže naučiť sa rozhodovať pri práci na projekte.