Utente:Valerio Bozzolan/CSS grid layout

Esempio di un layout a griglia visualizzato su tre dispositivi.

Una griglia, nella progettazione di una interfaccia utente ed in particolare nel web design, è una pratica che descrive come poter disporre i contenuti in righe e colonne sfruttando lo spazio a disposizione, con comportamenti di ri-dimensionamento prevedibili, flessibili, per ottenere un design responsivo.

Storia

La definizione formale del concetto di griglia nasce essenzialmente per poter creare facilmente uno o più layout prevedibili e adattivi in funzione dello spazio grafico a disposizione. Per questo motivo, fin dalla prima bozza del World Wide Web Consortium nel 2011 in materia, la griglia si contrappone all'utilizzo di una tabella più tradizionale:

(EN)

«Come le tabelle, la griglia permette ad un autore di allineare elementi in colonne e righe, ma a differenza delle tabelle, la griglia non ha una struttura dei contenuti, e quindi permette una grande varietà di layout non possibili con le tabelle.»

(IT)

«Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the Grid doesn't have content structure, and thus enables a wide variety of layouts not possible with tables.»

(World Wide Web Consortium, Grid Layout)

Con questo tipo di layout,, una pagina può Sebbene esistano innumerevoli implementazioni, ciò che accomuna 11 marzo 2021

}} | authors = | base_standards = CSS | related_standards = | abbreviation = Grid, grid layout | domain = CSS | license = | website = w3.org, https://www.w3.org/TR/css-grid-1/. }}

Nel CSS, la struttura CSS a griglia

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (Flexbox). CSS grid is currently not an official standard (it is a W3C Candidate Recommendation) although it has been adopted by the recent versions of all current major browsers.

Motivation

CSS grid can create more robust and flexible layouts than the previous options like CSS floats. It also allows for more standardized code that works across browsers. This is in contrast to relying on specific browser hacks or complicated workarounds.

One issue with exploiting floats in CSS is that if content gets added to one portion of the page it could disrupt the flow of the page and break the layout. This is due to the varying heights for layout elements. Though CSS flex box supports flexible layouts and provides the flexibility of creating complex layouts, it fails when the need for creating responsive layouts in 2-dimensional space arises.

History

The first comprehensive draft of a grid layout for CSS was created by Phil Cupp at Microsoft in 2011 and implemented in Internet Explorer 10 behind a -ms- vendor prefix. The syntax was restructured and further refined through several interations in the CSS Working Group, led primarily by Elika Etemad and Tab Atkins Jr. The feature was widely adopted by web developers after evangelism led primarily by Rachel Andrew and Jen Simmons.

Browser support

As of October 2017, Chrome, Firefox, Safari and Edge all support CSS grid without vendor prefixes. IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera Mini and brave Browser. Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed.

Utilization in frameworks

Tailwind CSS incorporates CSS grid into its utilities for controlling how elements are sized and placed. However many other current web frameworks do not incorporate CSS grid, such as Bootstrap 4 and Foundation 6.

the fr unit

The "fr" unit is often used with CSS grid layout. The "fr" unit, part of the CSS grid layout specification, represents a fraction of the leftover space in the grid container.

Examples

"Holy grail" layout

The following is an example of the "holy grail" layout:

HTML

Output

<html> <style> div { border: 1px solid; } body { display: grid; grid-template-columns: 10em auto 10em; grid-template-areas: "header header header" "left middle right" "footer footer footer"; } </style> <body> <div style="grid-area: header">The header</div> <div style="grid-area: footer">The footer</div> <div style="grid-area: left">The left panel</div> <div style="grid-area: middle; height: 200px">The main content area</div> <div style="grid-area: right">The right panel</div> </body> </html>

Table of values

The following is an example of a table of values:

HTML

Output

<html> <style> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 0.5em; } div { border: 1px solid; } </style> <body> <div class="wrapper"> <h3>Header1</h3><h3>Header2</h3><h3>Header3</h3> <div>value11</div><div>value12</div><div>value13</div> <div>value21</div><div>value22</div><div>value23</div> <div>value31</div><div>value32</div><div>value33</div> <div>value41</div><div>value42</div><div>value43</div> <div>value51</div><div>value52</div><div>value53</div> <div>value61</div><div>value62</div><div>value63</div> <div>value71</div><div>value72</div><div>value73</div> </div> </body> </html>

External links

• CSS Grid Layout Module Level 1
• CSS Grid vs Flexbox