Tanulja meg, hogyan használhatja a CSS-rácsokat összetett elrendezések egyszerű elkészítéséhez.
Az elemek elhelyezése a weboldalon nagyon bonyolult lehet, ha összetett elrendezésekkel dolgozik. Itt jön jól a CSS rács. Ez egy olyan elrendezési rendszer, amely az összetett elrendezések létrehozásának folyamatát egyszerűsíti.
Hogyan segít? A hagyományos elrendezési módszerekkel ellentétben, amelyek csak sorokban vagy oszlopokban teszik lehetővé az elemek elhelyezését, a CSS-rács mindkét világból a legjobbat kínálja – a sorokat és oszlopokat használó 2D-s megközelítést.
Rács konténerek és tételek
A CSS-rács tulajdonságait két fő elemtípusra alkalmazhatja: szülőre és gyermekre. Ha a megjelenítési tulajdonságot "rács" értékre állítja egy szülőelemhez, akkor az elemet rácstárolóvá alakítja. A rácstárolón belül minden gyermekelem rácselemmé válik, örökli az alkalmazott rács tulajdonságait.
Íme, hogyan ábrázolják:
A rácselemből rácstároló is lehet. Az elrendezést most beágyazott rácsként – egy rácson belüli rácsként – használhatja. A fő rácstartályt most külső rácsnak nevezik, míg az elemből kifordított rácsos tartály belső rácsmá válik.
Mindegyik rács a másiktól függetlenül működik, ami azt jelenti, hogy a belső rácsokhoz beállított tulajdonságok nem befolyásolják a külső rács elrendezését, és fordítva.
Így néz ki:
A rácskonténerek és az elemek közötti kapcsolat elsajátítása elengedhetetlen kétdimenziós elrendezések építése hatékonyan.
Ne feledje, hogy vannak rácstulajdonságok a rácstárolókhoz, míg mások a rácselemekhez.
Rácsvonalak és pályák
A CSS-rács használatának megkezdése előtt két kulcsfontosságú kifejezést kell ismernie:
- Rácsvonalak: A rácsvonalak azokra a vízszintes és függőleges vonalakra utalnak, amelyek a rácsot alkotják egy CSS-rácselrendezésben. Meghatározzák a sorok és oszlopok kezdő- és végpontját, segítve a dolgok elrendezését a rácson. Ezek a vonalak olyanok, mint a dobozok szélei; számokkal rendelkeznek, amelyek segítenek az elemek hivatkozásában a pozicionálás során. Itt a piros szaggatott vonal jelzi őket:
- Rács pályák: A sorokat és oszlopokat meghatározó rácsvonalak közötti rések. Olyanok, mint a rács elrendezésének építőkövei. A fenti képen az egyes elemeken belüli színes terület a rácssávot jelenti.
Gondoljon a rácsvonalakra és sávokra egy rácselrendezés építőelemeiként, mint a vonalak egy milliméterpapír lapján. Amikor egy vízszintes rácsvonal metszi a függőleges rácsvonalat, doboz alakú cellát képez. Ezek a cellák tárolóként működnek, ahol elhelyezheti a rácselemeket.
CSS-rács-tároló tulajdonságai
Ezek olyan tulajdonságok, amelyeket a rácstárolóra alkalmazhat az elrendezés megszervezéséhez és az elemek elhelyezésének elősegítéséhez. Mint korábban említettük, ezek egyike a grid-re beállított megjelenítési tulajdonság. Itt vannak még:
Rács sablon
Ez a tulajdonság határozza meg a sorok és oszlopok méretét. Ezeket a tulajdonságokat pixelek, százalékok vagy a tört mértékegység (fr) használatával méretezheti. Használhat olyan kulcsszavakat is, mint pl auto, minimum maximum(), és ismétlés() a rugalmasság fokozására.
- rács-sablon-sorok: Beállítja a sorok magasságát.
- rács-sablon-oszlopok: Az oszlopszélességeket határozza meg.
Íme néhány példa:
Pixelek használata:
.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}Százalékok használata:
.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}A fr:
.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}
Auto és minmax() kulcsszavak használata:
.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}
A repeat() használata a konzisztens méretezéshez:
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}
Automatikus elhelyezés és rácssablon területek
Automatikus elhelyezés: Az automatikus elhelyezés olyan, mintha a rács dönthetné el, hová helyezze el az elemeket. Ha nem ad meg pontos pozíciókat, a rács automatikusan abban a sorrendben helyezi el az elemeket, ahogy azok a jelölésben megjelennek. Ez akkor hasznos, ha sok eleme van, és azt szeretné, hogy azok egyenletesen töltsék ki a rácsot.
Rács sablon területek: Gondoljon a rácssablon területekre úgy, mint egy elrendezés létrehozására elnevezett zónák használatával. Ez olyan, mint a szobák elnevezése az alaprajzon. Ezekre a területnevekre hivatkozhat a rácselemek pozicionálásakor. Például:
.grid-container {
grid-template-areas:'headerheaderheaderheader'
'sidebarmainmainright'
'sidebarcontentcontentright'
'footerfooterfooterfooter';
}
Ez az elrendezés olyan, mint egy három oszlopból és négy sorból álló rács. A fő tartalomterülethez két sor tartozik. A címkézett területek közé tartozik a „fejléc”, „oldalsáv”, „tartalom” és „lábléc”. A következő szakaszokban megtudhatja, hogyan használhatja ezeket a területcímkéket az egyes rácselemek tulajdonságaiban.
Igazítás CSS-rácsban
Az igazítási tulajdonságok segítségével szabályozhatja a rácselemek elhelyezését a rácscellákon belül. A tulajdonságok a következők:
-
indokol-tételek: Szabályozza az elemek vízszintes igazítását a rácscellán belül.
- Értékek: eleje, vége, középpontja és nyújtása.
-
align-ites: Szabályozza az elemek függőleges igazítását a rácscellán belül.
- Értékek: eleje, vége, középpontja és nyújtása.
-
indokolja-tartalom: A teljes rácsot a tárolón belül a vízszintes tengely mentén igazítja.
- Értékek: eleje, vége, középpontja, nyújtása, térköz, térköz és térköz-egyenletes.
-
align-content: A teljes rácsot igazítja a tárolón belül a függőleges tengely mentén.
- Értékek: eleje, vége, középpontja, nyújtása, térköz, térköz és térköz-egyenletes.
Íme egy példa:
.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}Ebben a példában az elemek vízszintesen és függőlegesen is középre kerülnek a celláikban. A tér egyenletesen oszlik el a teljes rács oszlopai között, és a rács függőlegesen fog középre állni a tárolóban.
Grid Gap
A rácsrés a sorok és oszlopok közötti térre utal egy rácselrendezésben. Segít a vizuális elválasztás létrehozásában, és némi helyet ad a rácselemek között.
A rács-rés tulajdonság lehetővé teszi a sorok és oszlopok közötti távolság beállítását. Különféle mértékegységeket használhat a meghatározásához, például pixeleket (px), százalékokat (%), em mértékegységeket (em) stb.
.grid-container {
grid-gap: 20px;
}Ebben a példában a rácstárolónak két oszlopa van, amelyek között 20 képpontos hézag van. Ez a térköz vizuálisan elválasztja az oszlopokat és javítja az elrendezést.
CSS-rács elem tulajdonságai
Íme néhány kulcsfontosságú tulajdonság, amelyek szabályozzák az egyes rácselemek viselkedését egy CSS-rácselrendezésen belül, valamint példák:
grid-row-star és grid-row-end:
- Meghatározza az elem kezdő és záró sorát.
- Az értékek lehetnek sorszámok, „span n” vagy „auto”.
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}
Ez a kód elhelyezi Rács 1. elem a második sor sorától a negyedik sor soráig.
rács-oszlop-kezdet és rács-oszlop-vége:
- Meghatározza az elem kezdő és záró oszlopsorait.
- Az értékek lehetnek sorszámok, "span n" vagy "auto".
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}
Ez a kód elhelyezi 2. rácselem az első oszlopsortól a harmadik oszlopsorig.
rács-terület:
- Megadja egy rácselem méretét és pozícióját a rácson belül a megnevezett rácsvonalakra való hivatkozással rács-sablon-területek.
- Ahogy korábban említettük, az előre meghatározott területnevek már használatban vannak a rács-sablon-területek ingatlan. Íme egy példa, hogyan kell együtt használni rács-terület.
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}Íme az eredmény:
igazolni-önmagát:
- Az egyes elemeket vízszintesen igazítja a cellán belül.
- Az értékek lehetnek start, end, center és stretch.
.grid-item-5 {
justify-self: center;
}
Ez a kód vízszintesen középre helyezi a 5. rácselem celláján belül.
igazod-ön:
- Az egyes elemeket függőlegesen igazítsa a cellán belül.
- Az értékek lehetnek start, end, center és stretch.
.grid-item-1 {
align-self: end;
}
Ez a kód igazodik Rács 1. elem cellája aljára.
Nyugodtan kombinálhatja és testreszabhatja ezeket a tulajdonságokat, hogy létrehozza a kívánt elrendezést és megjelenést a CSS-rács minden egyes rácseleméhez.
Reszponzív elrendezések létrehozása CSS-rácsok segítségével
CSS rácsok használata a reszponzív elrendezések létrehozása fontos annak biztosítása érdekében, hogy weboldala zökkenőmentesen alkalmazkodjon a különböző képernyőméretekhez és eszközökhöz. Ezeket a módszereket alkalmazhatja:
- Médialekérdezések: Használhat médialekérdezéseket különböző rácselrendezések alkalmazásához a képernyő méretétől függően. Előfordulhat például, hogy át kell rendeznie a rácselemeket, vagy módosítania kell az oszlopszélességet a kisebb képernyőkhöz.
- Rugalmas egységek: Használjon relatív mértékegységeket, például százalékot és frt, hogy lehetővé tegye a rácselemek és oszlopok arányos beállítását a rendelkezésre álló helyhez.
- minimum maximum(): Használja a minimum maximum() függvény a rács oszlopainak vagy sorainak mérettartományának megadásához. Biztosítja, hogy az elemek ne tűnjenek túl kicsinek vagy túl nagynak a különböző képernyőkön.
Ne felejtse el módosítani az oszlopokat és az egyéb elemeket, például a rácselemek közötti hézagokat, a betűméretet és a margókat. Konzisztens és jól megtervezett elrendezést biztosít, amely jól működik különböző eszközökön.
Fedezze fel a CSS Grid Layout lehetőségeit
A CSS-rács rugalmasságának és erejének kihasználása lehetővé teszi, hogy olyan elrendezéseket készítsen, amelyek nem csak jól néznek ki, hanem zökkenőmentesen alkalmazkodnak a modern webdizájn igényeihez. Tehát merüljön el a rácsok világában, fedezze fel a lehetőségeket, és fejlessze webfejlesztési készségeit.
Az elrendezési rendszerekben való elmélyülés során érdemes lehet más elrendezési módszereket is összehasonlítani a CSS-rácsokkal. Ezt megteheti a CSS Flexbox modullal. Ez segít megtanulni dönteni, amikor egy projekten dolgozik.
