Grid.css - minimálny systém grid pre vývojárov webu

Väčšie frontend rámcov ako Bootstrap prichádzajú s ich vlastné nastavenie siete. Ale aj oni prísť s množstvom batožiny vo forme vopred navrhnutých prvkov stránky a komponentov JavaScriptu.

Ak hľadáte oveľa menšie a racionálnejšie mriežky systém potom budete milovať Grid.css.

Táto bezplatná knižnica s otvoreným zdrojom je zabalená s tradičnou Systém 12-col mriežky že môžete štruktúru pre akékoľvek rozloženie. CSS je veľmi jednoduché a samotný súbor len opatrenia 560 bajtov (to je polovica KB!)

Začíname je super jednoduché a stačí jeden súbor CSS pridané do vašej hlavičky.

Môžete nájsť priamy odkaz na prevzatie na domovskej stránke Grid.css alebo v oficiálnom repo GitHub. Môžete dokonca použiť surová verzia CDN vložiť tento súbor priamo od spoločnosti GitHub bez toho, aby ste ho hosťovali sami.

Teraz môžete nastaviť štruktúru stĺpcov pomocou ľubovoľných prvkov, ktoré chcete (divs, sekcie atď.).

Toto spravidla zahŕňa a .riadok prvok (kontajner) spolu s mnohými vnútorné prvky stĺpcov. Triedy stĺpcov používať čísla definovať ich celkový priestor vo vnútri kontajnera, napríklad, .Col4 zaberá štyri stĺpce dvanástich celkov.

Tu je jeden príklad úryvku z demo:

Môžete použiť ľubovoľnú kombináciu tried stĺpcov, ktoré sa vám páčia, len tak dlho, ako oni pridajte až 12.

To znamená, že môžete tiež reštrukturalizáciu stránky ako chcete, pomocou rôznych kontajnerov. Môžete napríklad mať jeden veľký rozsah záhlavia, ale pre vaše telo stránky používať dve odlišné nastavenia riadka / stĺpec.

Samozrejme, táto knižnica je 100% zadarmo a open-source, takže máte možnosť robiť úpravy, ktoré sa vám páčia.

Tvorca, Ahmed Tarek, tiež urobil Butns ktorý je variantom mnohých zostáv tlačidiel UI vonku. to páry pekne s Grid.css, takže sú obaja vynikajúce knižnice, ktoré si vyzdvihnú pri spustení nového webového projektu.