Sintassi

Significato dei valori principali:

• px, %, em: definiscono larghezze fisse o relative delle colonne, es. 200px, 50%, 10em.

• fr: unità flessibile che rappresenta una frazione dello spazio disponibile. Es: 1fr 2fr divide lo spazio in 3 parti, 1 e 2.

• repeat(n, val): crea n colonne con lo stesso valore. Es: repeat(3, 1fr) crea 3 colonne uguali.

• minmax(min, max): definisce una larghezza minima e massima per una colonna. Es: minmax(100px, 1fr).

Esempio proprietà: grid-template-columns

Codice Esempio: grid-template-columns

CODE: CSS

1. .grid-columns-example {

2.   display: grid;

3.   grid-template-columns: 150px 1fr minmax(100px, 300px);

4.   gap: 10px;

5.   padding: 10px;

6.   border: 2px solid #999;

7. }

9. .grid-columns-example > div {

10.   background-color: #e45649;

11.   color: white;

12.   font-size: 18px;

13.   padding: 20px;

14.   text-align: center;

15.   border-radius: 5px;

16. }

Contenuto Esempio: grid-template-columns

  
  <style>
    .grid-columns-example {
      display: grid;
      grid-template-columns: 150px 1fr minmax(100px, 300px);
      gap: 10px;
      padding: 10px;
    }

    .grid-columns-example > div {
      background-color: #e45649;
      color: white;
      font-size: 18px;
      padding: 20px;
      text-align: center;
    }
  </style>

  <div class="grid-columns-example">
    <div>Colonna 1<br><small>150px</small></div>
    <div>Colonna 2<br><small>1fr</small></div>
    <div>Colonna 3<br><small>minmax(100px, 300px)</small></div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser