Rozložení mřížky CSS - CSS grid layout
![]() | Tento článek nebo část mohou být psány stylem, který je příliš abstraktní být snadno srozumitelný pro obecné publikum.Října 2017) ( |
Kaskádové styly |
---|
Koncepty |
Filozofie |
Nástroje |
Srovnání |
v Kaskádové styly, Rozložení mřížky CSS nebo Mřížka CSS vytváří komplex responzivní webdesign rozložení snadněji a konzistentněji napříč prohlížeči.[1] Existují i jiné způsoby ovládání metod rozvržení webové stránky, například tabulky, krabicový model, a Flex box CSS. Mřížka CSS v současné době není oficiálním standardem (je to Doporučení kandidátů W3C ), i když byl přijat většinou hlavních prohlížečů.[2]
Motivace

Mřížka CSS může vytvářet více asymetrických rozvržení než předchozí možnosti mřížky a rozvržení Plovoucí CSS. Umožňuje také standardizovanější kód, který funguje napříč prohlížeči. To je v kontrastu s tím, že se spoléháme na konkrétní hacky prohlížeče nebo komplikovaná řešení.[2]
Jeden problém s využíváním plováků v CSS je, že pokud se obsah přidá do jedné části stránky, mohlo by to narušit tok stránky a rozbít rozložení. To je způsobeno různými výškami prvků rozvržení.[2] Ačkoli Flex box CSS podporuje flexibilní rozvržení a poskytuje flexibilitu při vytváření složitých rozvržení, selže, když vznikne potřeba vytvářet responzivní rozvržení ve 2-dimenzionálním prostoru.
Podpora prohlížeče
Od října 2017 všechny prohlížeče Chrome, Firefox, Safari a Edge podporují mřížku CSS bez předpony dodavatele.[3][4][5] IE 10 a 11 podporují mřížku CSS, ale se zastaralou specifikací. V mobilních zařízeních podporují všechny moderní prohlížeče mřížku CSS, kromě prohlížeče Opera Mini a UC Browser. Weboví vývojáři, kteří cílí na starší prohlížeče, mohou využít Modernizr 3.5.0 podle potřeby detekovat a elegantně degradovat webovou stránku. [6]
Využití v rámci
Na rozdíl od neexistují žádné současné webové rámce, které by obsahovaly mřížku CSS Flex box CSS který se používá v rámci, jako je Bootstrap 4 a Nadace 6.[7]
jednotka fr
Jednotka „fr“ se často používá s rozvržením mřížky CSS.[8][9][10]Jednotka „fr“, která je součástí specifikace rozložení mřížky CSS, představuje zlomek zbylého prostoru v kontejneru mřížky.[11]
Příklady
Zde je příklad rozložení svatého grálu:

<html><styl>div { okraj: 1px pevný; }tělo { Zobrazit: mřížka; grid-template-columns: 10em auto 10em; oblasti šablony mřížky: "záhlaví záhlaví záhlaví" "vlevo uprostřed vpravo" „zápatí zápatí zápatí“;}</styl><tělo> <div styl="oblast mřížky: hlavička">Záhlaví</div> <div styl="oblast mřížky: zápatí">Zápatí</div> <div styl="plocha mřížky: vlevo">Levý panel</div> <div styl=„plocha mřížky: střední; výška: 200 pixelů“>Hlavní oblast obsahu</div> <div styl="oblast mřížky: vpravo">Pravý panel</div></tělo></html>
Zde je příklad tabulky hodnot:

<html><styl>.obal { Zobrazit: mřížka; grid-template-columns: 1fr 1fr 1fr; mřížka: 0.5em;}div { okraj: 1px pevný; }</styl><tělo> <div třída="obal"> <h3>Záhlaví1</h3><h3>Záhlaví2</h3><h3>Záhlaví3</h3> <div>hodnota11</div><div>hodnota12</div><div>hodnota13</div> <div>hodnota21</div><div>hodnota22</div><div>hodnota23</div> <div>hodnota31</div><div>hodnota32</div><div>hodnota33</div> <div>hodnota41</div><div>hodnota42</div><div>hodnota43</div> <div>hodnota51</div><div>hodnota52</div><div>hodnota53</div> <div>hodnota61</div><div>hodnota62</div><div>hodnota63</div> <div>hodnota 71</div><div>hodnota72</div><div>hodnota73</div> </div></tělo></html>
Reference
- ^ „CSS Grid - rozložení tabulky je zpět. Buďte tam a buďte čtvercoví“. Google. Citováno 6. října 2017.
- ^ A b C „CSS Grid Layout Module Level 1“. W3C. 9. května 2017. Citováno 7. října 2017.
- ^ Anderson, Kareem (13. září 2017). „Nejnovější prohlížeč společnosti Microsoft významně podporuje EdgeHTML 16“. Citováno 7. října 2017.
- ^ Protalinski, Emil (9. března 2017). „Chrome 57 přichází s CSS Grid Layout a vylepšeními API | VentureBeat“. VentureBeat. Citováno 7. října 2017.
- ^ „CSS Grid Layout“. Mohu použít. Citováno 7. října 2017.
- ^ Ates, Faruk. „Modernizr 3.5.0“.
- ^ „Mřížky a rámce Flexbox“.
- ^ „CSS Grid Layout: The Fr Unit“.
- ^ „Částečný.“.
- ^ "Úvod do jednotky" fr` CSS "
- ^ „Flexibilní délky: jednotka„ fr “