Tartalomjegyzék:

Hogyan hozhatok létre rács-elrendezést CSS-ben?
Hogyan hozhatok létre rács-elrendezést CSS-ben?

Videó: Hogyan hozhatok létre rács-elrendezést CSS-ben?

Videó: Hogyan hozhatok létre rács-elrendezést CSS-ben?
Videó: Google űrlap készítése 2024, December
Anonim

Foglaljuk össze a négy alapvető lépést:

  1. Teremt egy tárolóelemet, és deklarálja, hogy jelenítse meg: rács ;.
  2. Ugyanezt a tárolót használja a rács számok segítségével rács - sablon -oszlopok és rács - sablon -rows tulajdonságait.
  3. Helyezze el a gyermekelemeket a tárolóba.
  4. Adja meg az ereszcsatorna méretét a rács -rés tulajdonságai.

Ebből kifolyólag használhatom a CSS rácselrendezést?

Az Internet Exploreren kívül CSS rács elrendezés előtag nélküli a Safari, Chrome, Opera, Firefox és Edge böngészőben. Az útmutatókban részletezett összes tulajdonság és érték támogatása a böngészők között együttműködik. Ez azt jelenti, hogy ha írsz néhányat Rácsszerkezet kódot a Firefoxban, ugyanígy kell működnie a Chrome-ban is.

Ezenkívül Flexboxot vagy rácsot használjak? Mindkét flexbox és rács ezen a koncepción alapulnak. Flexbox a legjobb az elemek egyetlen sorban vagy egyetlen oszlopban történő elrendezésére. Rács a legjobb az elemek több sorban és oszlopban történő elrendezésére. A justify-content tulajdonság határozza meg, hogy az extra szóköz hogyan Flex -konténer kerül kiosztásra a Flex -elemek.

Hasonlóképpen, mi az 1 fr?

1 fr egy "tört egység", ami azt jelenti, hogy "az elemben maradt hely".

Mi az a Flexbox rács?

Flexbox egydimenziós elrendezésekhez készült és Rács kétdimenziós elrendezésekhez készült. Ez azt jelenti, hogy ha az elemeket egy irányban helyezi el (például három gomb egy fejlécben), akkor a Flexbox : Nagyobb rugalmasságot biztosít, mint a CSS Rács.

Ajánlott: