El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre les propietats del contenidor Grid en CSS. CSS Grid és un sistema de disseny bidimensional que permet crear dissenys complexos de manera senzilla i eficient. Les propietats del contenidor Grid són fonamentals per definir l'estructura i el comportament de la graella.

Índex

Display: grid
Grid-template-columns i grid-template-rows
Grid-gap
Grid-template-areas
Justify-content i align-content
Exercicis Pràctics
Conclusió

Display: grid

La propietat display: grid és la que converteix un element en un contenidor Grid. Això permet utilitzar totes les altres propietats de Grid per definir el disseny.

.container {
  display: grid;
}

Grid-template-columns i grid-template-rows

Aquestes propietats defineixen el nombre de columnes i files, així com les seves dimensions.

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 100px;
}

En aquest exemple, el contenidor Grid tindrà tres columnes amb amplades de 100px, 200px i 100px, respectivament, i dues files amb alçades de 50px i 100px.

Fraccions (fr)

Una unitat molt útil en CSS Grid és la fracció (fr), que permet dividir l'espai disponible de manera proporcional.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

En aquest cas, la segona columna serà el doble d'ampla que la primera i la tercera.

Grid-gap

La propietat grid-gap (o les seves variants grid-row-gap i grid-column-gap) defineix l'espai entre les files i les columnes.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

Això crearà un espai de 10px entre cada fila i columna.

Grid-template-areas

Aquesta propietat permet definir àrees nominals dins del contenidor Grid, facilitant la col·locació dels elements fills.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

En aquest exemple, hem definit tres àrees: header, sidebar i main, i hem assignat aquestes àrees als elements fills corresponents.

Justify-content i align-content

Aquestes propietats s'utilitzen per alinear el contingut dins del contenidor Grid.

justify-content: alinea el contingut horitzontalment.
align-content: alinea el contingut verticalment.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  align-content: center;
}

Exercicis Pràctics

Exercici 1: Crear una Graella Simple

Crea un contenidor Grid amb tres columnes de la mateixa amplada i dues files de la mateixa alçada. Afegeix un espai de 20px entre les files i les columnes.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 1</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 100px 100px;
      grid-gap: 20px;
    }
    .item {
      background-color: lightblue;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

Exercici 2: Utilitzar Grid-template-areas

Crea un contenidor Grid amb una àrea de capçalera, una barra lateral i una àrea principal. Utilitza grid-template-areas per definir les àrees.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 2</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: 100px 1fr;
      grid-template-areas:
        "header header"
        "sidebar main";
      grid-gap: 10px;
    }
    .header {
      grid-area: header;
      background-color: lightcoral;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightgreen;
    }
    .main {
      grid-area: main;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Capçalera</div>
    <div class="sidebar">Barra Lateral</div>
    <div class="main">Àrea Principal</div>
  </div>
</body>
</html>

Conclusió

En aquesta secció, hem après sobre les propietats del contenidor Grid, incloent-hi display: grid, grid-template-columns, grid-template-rows, grid-gap, grid-template-areas, justify-content i align-content. Aquestes propietats són essencials per crear dissenys complexos i flexibles amb CSS Grid. En els següents temes, aprofundirem en les propietats dels elements Grid i com utilitzar CSS Grid per crear dissenys responsius.

Propietats del Contenidor Grid

Índex

Display: grid

Grid-template-columns i grid-template-rows

Fraccions (fr)

Grid-gap

Grid-template-areas

Justify-content i align-content

Exercicis Pràctics

Exercici 1: Crear una Graella Simple

Exercici 2: Utilitzar Grid-template-areas

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu