Hoe skep ek 'n roosteruitleg in CSS?
Hoe skep ek 'n roosteruitleg in CSS?

INHOUDSOPGAWE:

Anonim

Kom ons hervat die vier noodsaaklike stappe:

  1. Skep 'n houerelement, en verklaar dat dit vertoon word: rooster ;.
  2. Gebruik dieselfde houer om die rooster spore met behulp van die rooster - sjabloon -kolomme en rooster - sjabloon -rye eienskappe.
  3. Plaas kinderelemente binne die houer.
  4. Spesifiseer die geutgroottes deur die rooster -gaping eienskappe.

Hiervan, kan ek CSS-roosteruitleg gebruik?

Anders as in Internet Explorer, CSS-roosteruitleg is sonder voorvoegsel in Safari, Chrome, Opera, Firefox en Edge. Ondersteuning vir al die eienskappe en waardes wat in hierdie gidse uiteengesit word, is interoperabel oor blaaiers heen. Dit beteken dat as jy skryf 'n paar Roosteruitleg kode in Firefox, behoort dit op dieselfde manier in Chrome te werk.

Moet ek ook Flexbox of rooster gebruik? Albei flexbox en rooster is gebaseer op hierdie konsep. Flexbox is die beste om elemente in óf 'n enkele ry óf 'n enkele kolom te rangskik. Rooster is die beste om elemente in veelvuldige rye en kolomme te rangskik. Die regverdig-inhoud eiendom bepaal hoe die ekstra spasie van die buig -houer word aan die versprei buig -items.

Net so, wat is 1fr?

1 fr is een "fraksionele eenheid", wat 'n manier is om te sê "die oorblywende spasie in die element".

Wat is Flexbox-rooster?

Flexbox is gemaak vir eendimensionele uitlegte en Rooster is gemaak vir tweedimensionele uitlegte. Dit beteken dat as jy items in een rigting uitlê (byvoorbeeld drie knoppies binne 'n kopskrif), dan moet jy Flexbox : Dit sal jou meer buigsaamheid gee as CSS Rooster.