Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Creazione di Layout con le Utility Grid | Basi del Layout
Tailwind CSS per lo Sviluppo Web

bookCreazione di Layout con le Utility Grid

Un altro metodo per organizzare i contenuti di un sito web è tramite le griglie. Tailwind CSS offre potenti utility per la creazione di layout a griglia. Questo capitolo spiega come utilizzare le utility grid di Tailwind CSS per definire contenitori e elementi a griglia.

Contenitore Grid

Per definire un contenitore grid, utilizzare la classe grid. È possibile controllare il numero di colonne, gli spazi tra le righe e le colonne, e altro ancora.

index.html

index.html

copy

Spiegazione

  1. grid: Imposta la visualizzazione dell'elemento su grid;
  2. grid-cols-3: Definisce una griglia con tre colonne;
  3. gap-4: Aggiunge uno spazio di 1rem (16px) tra gli elementi della griglia.

Griglia con righe

index.html

index.html

copy

grid-rows-2: Definisce una griglia con due righe.

Controllo delle dimensioni di colonne e righe

È possibile controllare le dimensioni delle colonne e delle righe utilizzando le classi grid-cols-{n} e grid-rows-{n}, dove {n} rappresenta il numero di colonne o righe. Si possono anche utilizzare unità frazionarie (fr), percentuali e altre unità di misura.

index.html

index.html

copy

Spiegazione

  1. col-span-2: Estende l'elemento su due colonne;
  2. col-span-3: Estende l'elemento su tutte e tre le colonne.

Dimensioni fisse e flessibili

index.html

index.html

copy

Spiegazione

  1. w-1/2: Imposta la larghezza dell'elemento al 50% del suo contenitore;
  2. w-full: Imposta la larghezza dell'elemento al 100% del suo contenitore;
  3. w-1/3: Imposta la larghezza dell'elemento al 33,33% del suo contenitore.

Colonne e righe del modello griglia

È possibile utilizzare classi di utilità specifiche per definire il numero e la larghezza delle colonne e delle righe nel layout a griglia.

Colonne griglia personalizzate

index.html

index.html

copy

Spiegazione

  1. grid-cols-4: Definisce una griglia con quattro colonne;
  2. col-span-1: Estende l'elemento su una colonna;
  3. col-span-2: Estende l'elemento su due colonne.

Righe personalizzate della griglia

index.html

index.html

copy

Spiegazione

  1. grid-rows-3: Definisce una griglia con tre righe;
  2. row-span-2: Estende l'elemento su due righe;
  3. row-span-1: Estende l'elemento su una riga.

Nota

Consultare la documentazione ufficiale per ulteriori informazioni sulla Grid di Tailwind CSS.

1. Quale classe imposta la proprietà display su grid?

2. Come si definisce una griglia con tre colonne?

question mark

Quale classe imposta la proprietà display su grid?

Select the correct answer

question mark

Come si definisce una griglia con tre colonne?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 5

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain how to use grid utilities for responsive layouts?

What are some common use cases for grid layouts in Tailwind CSS?

Can you show more examples of combining grid and flex utilities?

Awesome!

Completion rate improved to 3.57

bookCreazione di Layout con le Utility Grid

Scorri per mostrare il menu

Un altro metodo per organizzare i contenuti di un sito web è tramite le griglie. Tailwind CSS offre potenti utility per la creazione di layout a griglia. Questo capitolo spiega come utilizzare le utility grid di Tailwind CSS per definire contenitori e elementi a griglia.

Contenitore Grid

Per definire un contenitore grid, utilizzare la classe grid. È possibile controllare il numero di colonne, gli spazi tra le righe e le colonne, e altro ancora.

index.html

index.html

copy

Spiegazione

  1. grid: Imposta la visualizzazione dell'elemento su grid;
  2. grid-cols-3: Definisce una griglia con tre colonne;
  3. gap-4: Aggiunge uno spazio di 1rem (16px) tra gli elementi della griglia.

Griglia con righe

index.html

index.html

copy

grid-rows-2: Definisce una griglia con due righe.

Controllo delle dimensioni di colonne e righe

È possibile controllare le dimensioni delle colonne e delle righe utilizzando le classi grid-cols-{n} e grid-rows-{n}, dove {n} rappresenta il numero di colonne o righe. Si possono anche utilizzare unità frazionarie (fr), percentuali e altre unità di misura.

index.html

index.html

copy

Spiegazione

  1. col-span-2: Estende l'elemento su due colonne;
  2. col-span-3: Estende l'elemento su tutte e tre le colonne.

Dimensioni fisse e flessibili

index.html

index.html

copy

Spiegazione

  1. w-1/2: Imposta la larghezza dell'elemento al 50% del suo contenitore;
  2. w-full: Imposta la larghezza dell'elemento al 100% del suo contenitore;
  3. w-1/3: Imposta la larghezza dell'elemento al 33,33% del suo contenitore.

Colonne e righe del modello griglia

È possibile utilizzare classi di utilità specifiche per definire il numero e la larghezza delle colonne e delle righe nel layout a griglia.

Colonne griglia personalizzate

index.html

index.html

copy

Spiegazione

  1. grid-cols-4: Definisce una griglia con quattro colonne;
  2. col-span-1: Estende l'elemento su una colonna;
  3. col-span-2: Estende l'elemento su due colonne.

Righe personalizzate della griglia

index.html

index.html

copy

Spiegazione

  1. grid-rows-3: Definisce una griglia con tre righe;
  2. row-span-2: Estende l'elemento su due righe;
  3. row-span-1: Estende l'elemento su una riga.

Nota

Consultare la documentazione ufficiale per ulteriori informazioni sulla Grid di Tailwind CSS.

1. Quale classe imposta la proprietà display su grid?

2. Come si definisce una griglia con tre colonne?

question mark

Quale classe imposta la proprietà display su grid?

Select the correct answer

question mark

Come si definisce una griglia con tre colonne?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 5
some-alt