El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Propietats dels Elements Grid

Següent ►
►

En aquest tema, explorarem les propietats que es poden aplicar als elements fills d'un contenidor CSS Grid. Aquestes propietats permeten controlar com es col·loquen i dimensionen els elements dins de la graella. A continuació, desglossarem les propietats clau i proporcionarem exemples pràctics per ajudar-te a comprendre com utilitzar-les.

  1. grid-column-start i grid-column-end

Descripció

Aquestes propietats defineixen en quina línia de la graella comença i acaba un element en l'eix de les columnes.

Sintaxi

.element {
  grid-column-start: <line>;
  grid-column-end: <line>;
}

Exemple

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propietats dels Elements Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .item1 {
      grid-column-start: 1;
      grid-column-end: 3; /* Ocupa dues columnes */
    }
    .item2 {
      grid-column-start: 3;
      grid-column-end: 5; /* Ocupa dues columnes */
    }
    .item3 {
      grid-column-start: 1;
      grid-column-end: 5; /* Ocupa totes les columnes */
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
</body>
</html>

  1. grid-row-start i grid-row-end

Descripció

Aquestes propietats defineixen en quina línia de la graella comença i acaba un element en l'eix de les files.

Sintaxi

.element {
  grid-row-start: <line>;
  grid-row-end: <line>;
}

Exemple

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propietats dels Elements Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }
    .item1 {
      grid-row-start: 1;
      grid-row-end: 3; /* Ocupa dues files */
    }
    .item2 {
      grid-row-start: 3;
      grid-row-end: 5; /* Ocupa dues files */
    }
    .item3 {
      grid-row-start: 1;
      grid-row-end: 5; /* Ocupa totes les files */
    }
    .item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
</body>
</html>

  1. grid-area

Descripció

La propietat grid-area és una forma abreujada de definir simultàniament grid-row-start, grid-column-start, grid-row-end i grid-column-end.

Sintaxi

.element {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

Exemple

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propietats dels Elements Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }
    .item1 {
      grid-area: 1 / 1 / 3 / 3; /* Ocupa dues files i dues columnes */
    }
    .item2 {
      grid-area: 3 / 3 / 5 / 5; /* Ocupa dues files i dues columnes */
    }
    .item3 {
      grid-area: 1 / 3 / 5 / 5; /* Ocupa totes les files i dues columnes */
    }
    .item {
      background-color: lightgreen;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
</body>
</html>

  1. justify-self i align-self

Descripció

Aquestes propietats permeten alinear individualment un element dins de la seva cel·la de graella en els eixos horitzontal (justify-self) i vertical (align-self).

Sintaxi

.element {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Exemple

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propietats dels Elements Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .item1 {
      justify-self: start;
      align-self: start;
    }
    .item2 {
      justify-self: center;
      align-self: center;
    }
    .item3 {
      justify-self: end;
      align-self: end;
    }
    .item4 {
      justify-self: stretch;
      align-self: stretch;
    }
    .item {
      background-color: lightyellow;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
  </div>
</body>
</html>

Exercicis Pràctics

Exercici 1

Crea una graella de 3x3 on el primer element ocupi les dues primeres columnes i files, el segon element ocupi la tercera columna i les dues primeres files, i el tercer element ocupi tota la tercera fila.

Solució

<!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>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .item1 {
      grid-area: 1 / 1 / 3 / 3;
    }
    .item2 {
      grid-area: 1 / 3 / 3 / 4;
    }
    .item3 {
      grid-area: 3 / 1 / 4 / 4;
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
</body>
</html>

Exercici 2

Crea una graella de 4x4 on cada element estigui alineat de manera diferent utilitzant justify-self i align-self.

Solució

<!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>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }
    .item1 {
      justify-self: start;
      align-self: start;
    }
    .item2 {
      justify-self: center;
      align-self: center;
    }
    .item3 {
      justify-self: end;
      align-self: end;
    }
    .item4 {
      justify-self: stretch;
      align-self: stretch;
    }
    .item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
  </div>
</body>
</html>

Conclusió

En aquest tema, hem après sobre les propietats dels elements Grid, incloent grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-area, justify-self i align-self. Aquestes propietats són fonamentals per controlar la col·locació i l'alineació dels elements dins d'una graella CSS. Practica amb els exemples i exercicis proporcionats per dominar aquestes tècniques i aplicar-les als teus propis projectes de disseny web.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats