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

Grids Fluids

Següent ►
►

En aquest tema, explorarem el concepte de "grids fluids" o "graelles fluids", una tècnica essencial en el disseny responsive que permet crear dissenys flexibles i adaptables a diferents mides de pantalla. Els grids fluids són una part fonamental per assegurar que el contingut del teu lloc web es mostri correctament en qualsevol dispositiu.

Què són els Grids Fluids?

Els grids fluids són sistemes de disseny que utilitzen unitats relatives en lloc d'unitats fixes per definir l'amplada de les columnes i altres elements del disseny. Això permet que els elements s'ajustin proporcionalment a la mida de la pantalla.

Conceptes Clau:

  • Unitats Relatives: Utilitzen percentatges en lloc de píxels per definir amplades i marges.
  • Proporcionalitat: Els elements del disseny s'ajusten proporcionalment a la mida de la pantalla.
  • Flexibilitat: Permet que el disseny s'adapti a diferents dispositius sense necessitat de redissenyar-lo completament.

Implementació de Grids Fluids

Pas 1: Configurar el Contenidor

El primer pas per crear un grid fluid és definir un contenidor que mantindrà les columnes. Aquest contenidor ha de tenir una amplada màxima per evitar que el contingut s'estengui massa en pantalles grans.

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

Pas 2: Definir les Columnes

Utilitza percentatges per definir l'amplada de les columnes dins del contenidor. Això permet que les columnes s'ajustin automàticament a la mida del contenidor.

.column {
  float: left;
  width: 33.33%; /* Tres columnes iguals */
  padding: 10px;
}

Pas 3: Netejar el Flotat

Després de definir les columnes, és important netejar el flotat per assegurar que el contenidor s'ajusti correctament al seu contingut.

.row::after {
  content: "";
  display: table;
  clear: both;
}

Exemple Pràctic

A continuació, es mostra un exemple complet d'un grid fluid amb tres columnes:

<div class="container">
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h2>Columna 1</h2>
      <p>Contingut de la columna 1.</p>
    </div>
    <div class="column" style="background-color:#bbb;">
      <h2>Columna 2</h2>
      <p>Contingut de la columna 2.</p>
    </div>
    <div class="column" style="background-color:#ccc;">
      <h2>Columna 3</h2>
      <p>Contingut de la columna 3.</p>
    </div>
  </div>
</div>

Exercici Pràctic

Objectiu: Crea un disseny de quatre columnes utilitzant grids fluids.

  1. Defineix un contenidor amb una amplada màxima de 1000px.
  2. Crea quatre columnes dins del contenidor, cadascuna amb un 25% d'amplada.
  3. Assegura't que el disseny sigui responsive i s'ajusti correctament en diferents mides de pantalla.

Solució

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.column {
  float: left;
  width: 25%; /* Quatre columnes iguals */
  padding: 10px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}
<div class="container">
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h2>Columna 1</h2>
      <p>Contingut de la columna 1.</p>
    </div>
    <div class="column" style="background-color:#bbb;">
      <h2>Columna 2</h2>
      <p>Contingut de la columna 2.</p>
    </div>
    <div class="column" style="background-color:#ccc;">
      <h2>Columna 3</h2>
      <p>Contingut de la columna 3.</p>
    </div>
    <div class="column" style="background-color:#ddd;">
      <h2>Columna 4</h2>
      <p>Contingut de la columna 4.</p>
    </div>
  </div>
</div>

Conclusió

Els grids fluids són una tècnica poderosa per crear dissenys responsius que s'adapten a qualsevol mida de pantalla. Utilitzant unitats relatives com percentatges, pots assegurar-te que el teu disseny sigui flexible i accessible en una àmplia gamma de dispositius. En el proper tema, explorarem com les imatges flexibles complementen els grids fluids per millorar encara més el disseny responsive.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats