Divat rugalmas elrendezések a CSS-rácskal

Sep 11, 2025
kézikönyv
A woman sits at a laptop tweaking a CSS Grid layout

A CSS-rács tökéletes a sorok és oszlopok két tengelyes elrendezéséhez. A szintaxis egyszerű és az oldalelrendezés szellő. Az elrendezések, amelyek többszörös beágyazott konténert igényelnének, egyszerűen csak a CSS-ben írhatók le.

A Grid másképpen működik más elrendezési tulajdonságokkal, mivel a "Grid" értéket a "kijelző" tulajdonságra alkalmazza a közvetlen gyermekek számára. Ezek az elemek most rácselemek, és a szülőre beállított szabályok szerint helyezkednek el (kivéve, ha speciálisan elhelyezett).

Megragadja a rácsot

A Grid számos új funkciót hoz:

  • Rácsos rés

Ahelyett, hogy a margók használata lenne, a rács saját tulajdonsággal rendelkezik a rácselemek közötti rések meghatározására, lehetővé téve a rács elrendezését, hogy bármilyen hiányosságot határozzon meg és nem befolyásolja. Grid rendszerek (például amelyek megtalálhatók az inuit és a Twitter Bootstrap) általában támaszkodnak beállítás negatív árrés összehangolása érdekében mindent helyesen.

  • A FR egység

Rövid a frakcióhoz, ez az új mérési egység az elrendezést frakciókba osztja, résszel vagy anélkül.

  • Rács elhelyezése

A CSS-rács lehetővé teszi, hogy bármely elemet kiemeljék és a rácson bárhol elhelyezzük, mielőtt minden más elemet automatikusan elhelyezik.

  • Rácsterületek és sablonok

Megnevezték a rácson lévő nevezett területeket, amelyeket ezután az elrendezést szinte ASCII divatban határozhat meg.

  • minimum maximum()

A "MINMAX () 'tulajdonságérték lehetővé teszi, hogy minimális és maximális méretet alkalmazzon rácselemekre, oszlopokra és sorokra. Ez a funkció sajnos hiányzik a FLEXBOX és minden más elrendezési modul CSS-ben.

Építsd meg a rácsokat

A CSS-rács erőteljes területei és sablonjai lehetővé teszik a bonyolult elrendezéseket könnyen megvalósítva. Elkezdi a nevét a rácson belüli elemekre, a "rácsterület" tulajdonsággal - például a 'fejléc {rácsterület: fejléc; } '. Miután megnevezte a rács összes területét, akkor a "rács-sablon-területek" tulajdonságát használhatja az elrendezés leírásához. 

 Rács-sablon-területek:
  "Fejléc fejléc fejlécje"
  "Bal oldalsáv cikk Jobb oldalán"
  "Lábléc lábléc"

A fenti kódpélda három-három rácsot ír le, egyszerűen ismételje meg a rácselem nevét, ha több oszlopot vagy sorokat szeretne. A média lekérdezéseket is használhatja annak érdekében, hogy megváltoztassa a különböző méretű képernyők rácselrendezését.

Ezután használhatja az új "FR" készüléket, hogy meghatározza, hogy a szélesség megszakadjon a különböző oszlopok között: 

 Rács-sablon-oszlopok: 1fr 3fr 1fr;

A fent bemutatott példa öt egyenlő szélességű értékre osztható a rendelkezésre álló szélességet; Más szóval az első oszlopra, a második oszlopra és a végső ötödikre a végső oszlopra vonatkozik.

Annak érdekében, hogy mérete a sorok akkor az új "Minmax tulajdonság értéke méretre felső és alsó oszlopok azok tartalmát, majd hagyjuk a középső sorban, hogy befogják a fennmaradó hely a rács. 

 Rács-sablon-sorok:
  Minmax (min-tartalom, max-tartalom)
  autó
minmax (min-tartalom, max-tartalom);

Ezt a cikket eredetileg a Creative Web Design magazin webdesigner 271-es kiadásában tették közzé. megvesz Kiadás 271 vagy Feliratkozás a webes tervezőre .

Szeretné megerősíteni a CSS-sács-készségeket?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

A Brenda Storer a CSS-rács használatával a valós világban 2018. április 25-27.

A tervező és a front-end fejlesztő egy szoftver fejlesztési ügynökség, Brenda Storer már a CSS Grid termelés honlapok első megjelenése óta a böngészők március 2017 és egy nagy rajongója.

Beszélgetésben 2018. április 25-27-től New Yorkot generál Brenda megmutatja, lépésről-lépésre, hogyan lehet fokozatosan növeli a site CSS Grid és levelet golyóálló üzemszüneti régebbi böngészők (vagy akár továbbra is használhatja a jelenlegi rács keret, mint egy tartalék), melyek mindegyike tiszta CSS: nincs JavaScript szükséges .

New York létrehozása 2018. április 25-27-től történik. Most kapd meg jegyét .

Kapcsolódó cikkek:

  • A CSS rács elrendezése titkai feltárták
  • Hozzon létre egy érzékeny elrendezést a CSS-rács segítségével
  • Kelj fel a sebességgel a CSS-rács segítségével

kézikönyv - Most Popular Articles

Hogyan kell felhívni a nyakát és vállát

kézikönyv Sep 11, 2025

Amikor megtanulják, hogyan kell felhívni a nyakát és a vállakat, gyakran kihívást jelenthet, hogy megmutassam a munkánkban lévő köteteket, mivel az emberek elülső oldalait látju..

Hogyan készítsünk egy fotó kollázsot a Photoshop CC-ben

kézikönyv Sep 11, 2025

Tanulás Hogyan készítsünk egy fényképes kollázsot a Photoshopban, sok különböző helyzetben hasznos lesz. Egyedi képek elfog egyetlen pillanatok, de hivatkozhat a kollázs és akko..

Hogyan kell létrehozni egy helyi fejlesztési környezetet

kézikönyv Sep 11, 2025

(Kép hitel: jövő) A helyi fejlesztési környezet lehetővé teszi, hogy saját gépét használhatja webhelyének..

Kezdje el a Greensock animációs platformot

kézikönyv Sep 11, 2025

Greensock Animációs platform (GSAP) Lehetővé teszi, hogy animáljon bármit, amit a JavaScripthez, beleértve a dom, vászon ..

A 3D-s munka megvilágítása a kupola fényekkel

kézikönyv Sep 11, 2025

A kupola fények használata az elmúlt évtizedben az CGI létrehozás egyik legnagyobb fejlődése volt. Fürdés egy jelenet m..

Lenyűgöző tiltó textúrák létrehozása Blenderben

kézikönyv Sep 11, 2025

Page 1 of 2: 1 oldal 1 oldal 2. oldal ..

öltés és kompozit 360 felvétel

kézikönyv Sep 11, 2025

A Cara VR plugin Nuke-nak, most van egy erőteljes eszközünk a 360 felvételünk varrása és összeállítása érdekében. Ebben a bemutatóban megmutatom, h..

Hozzon létre egy reagáló műszerfalat a figmával

kézikönyv Sep 11, 2025

A Figma grafikus eszköz az UI tervezők számára. Egyszerű felülete van, és lehetővé teszi, hogy együttműködjön a csapattársaival való munkavégzéshez. Ha offline állapotban sz..

Kategóriák