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

HOME

En aquest tema, explorarem com utilitzar CSS Grid per crear dissenys responsius que s'adaptin a diferents mides de pantalla. CSS Grid és una eina poderosa per crear dissenys complexos i flexibles, i amb les tècniques adequades, podem assegurar-nos que aquests dissenys funcionin bé en qualsevol dispositiu.

Conceptes Clau

Unitats Relatives: Utilitzar unitats com %, fr, vw, i vh per crear dissenys flexibles.
Consultes de Mitjans (Media Queries): Aplicar estils específics en funció de la mida de la pantalla.
Àrees de la Graella (Grid Areas): Definir regions específiques de la graella per a una millor organització i control.
Funcions de CSS Grid: Utilitzar funcions com repeat(), minmax(), i auto-fit per crear dissenys adaptables.

Exemples Pràctics

Exemple 1: Configuració Bàsica de la Graella

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disseny Responsiu amb CSS Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </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>
</body>
</html>

Explicació:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));: Aquesta línia crea una graella amb columnes que s'ajusten automàticament a la mida de la pantalla. Cada columna tindrà un mínim de 200px i ocuparà l'espai restant de manera uniforme (1fr).
gap: 10px;: Afegeix un espai de 10px entre els elements de la graella.

Exemple 2: Utilitzant Consultes de Mitjans

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disseny Responsiu amb CSS Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        @media (min-width: 600px) {
            .container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 900px) {
            .container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </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>

Explicació:

@media (min-width: 600px): Quan la pantalla té una amplada mínima de 600px, la graella es divideix en 2 columnes.
@media (min-width: 900px): Quan la pantalla té una amplada mínima de 900px, la graella es divideix en 3 columnes.

Exercicis Pràctics

Exercici 1: Crear un Disseny de Graella Responsiu

Instruccions:

Crea una pàgina HTML amb una graella que contingui 8 elements.
Utilitza CSS Grid per configurar la graella de manera que:
- Tingui una sola columna en pantalles petites (menys de 600px).
- Tingui dues columnes en pantalles mitjanes (entre 600px i 900px).
- Tingui quatre columnes en pantalles grans (més de 900px).

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de Graella Responsiu</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        @media (min-width: 600px) {
            .container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 900px) {
            .container {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    </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 class="item">7</div>
        <div class="item">8</div>
    </div>
</body>
</html>

Resum

En aquest tema, hem après com utilitzar CSS Grid per crear dissenys responsius que s'adaptin a diferents mides de pantalla. Hem vist com utilitzar unitats relatives, consultes de mitjans i funcions de CSS Grid per aconseguir dissenys flexibles i adaptables. Amb aquests coneixements, estàs preparat per crear dissenys web que funcionin bé en qualsevol dispositiu.

Disseny Responsiu amb CSS Grid

Conceptes Clau

Exemples Pràctics

Exemple 1: Configuració Bàsica de la Graella

Exemple 2: Utilitzant Consultes de Mitjans

Exercicis Pràctics

Exercici 1: Crear un Disseny de Graella Responsiu

Resum

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