9.2. fejezet¶

A CSS Grid Layout egy elrendezési módszer, amely lehetővé teszi a weboldal elemeinek pontos és rugalmas elhelyezését sorokban és oszlopokban. A grid segítségével komplex elrendezéseket hozhatunk létre minimalisztikus és intuitív CSS kóddal. A CSS Grid különleges tulajdonságokkal rendelkezik a grid konténer és a grid elemek beállítására.

Grid Konténer¶

Ahhoz, hogy a grid layoutot használhassuk, először egy elemnek grid konténerként kell működnie. Ezt a display: grid; vagy display: inline-grid; tulajdonsággal érhetjük el.

Példa: grid használata

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Konténer Példa</title>
    <style>
        .grid-container {
            display: grid;
            background-color: lightgrey;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            padding: 10px;
        }

        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

A fenti példában egy Grid konténert (.grid-container) definiálunk a display: grid; tulajdonsággal. A konténer három oszlopból áll (grid-template-columns: 1fr 1fr 1fr;), ahol minden oszlop egyenlő szélességű. Az elemek között 10 pixel hézag (gap: 10px;) található. A konténer hat rácselemet (.grid-item) tartalmaz, amelyek mindegyike kék háttérszínnel és fehér szöveggel rendelkezik.

Az fr mértékegység¶

Az fr egy speciális mértékegység, amelyet grid esetében vezettek be. Az fr egy rugalmas egységet képvisel, amely a rendelkezésre álló terület egy részét jelenti. A fenti példában azt látjuk, hogy 1+1+1 fr-t használtunk, szóval mind a három oszlop 33%-nyi területet fog foglalni.

Ha a rendelkezésre álló terület 1000px, és grid-template-columns: 400px 2fr 1fr szerint hozzuk létre a gridet, akkor ez esetben a felosztható maradék terület 600px, amelyet három részre kell osztani (2-1 arányban), szóval az első oszlop 400px, a második oszlop szintén 400px, míg a harmadik oszlop 200px lesz.

Grid Tulajdonságok Grid Konténerekhez¶

grid-template-columns és grid-template-rows: Meghatározza a grid oszlopait és sorait.
Értékek lehetnek pixelben (px), százalékban (%), frakciós egységekben (fr), stb.
gap vagy grid-gap: Beállítja a hézagot a grid elemei között.
Külön oszlop (column-gap) és sor (row-gap) hézag is definiálható.
grid-template-areas: Definiálja a grid területek nevét, hogy könnyebben el lehessen helyezni az elemeket a gridben.
grid-auto-rows és grid-auto-columns: Meghatározza a sorok és oszlopok méretét, ha azok automatikusan jönnek létre.

Példa: grid template használata

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Konténer Tulajdonságok</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 100px 1fr 2fr;
            grid-template-rows: auto auto;
            gap: 10px;
            background-color: lightgrey;
            padding: 10px;
        }

        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .grid-item1 { grid-area: header; }
        .grid-item2 { grid-area: main; }
        .grid-item3 { grid-area: sidebar; }
        .grid-item4 { grid-area: footer; }

        .grid-container {
            grid-template-areas:
                'header header header'
                'main main sidebar'
                'footer footer sidebar';
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item grid-item1">Header</div>
        <div class="grid-item grid-item2">Main</div>
        <div class="grid-item grid-item3">Sidebar</div>
        <div class="grid-item grid-item4">Footer</div>
    </div>
</body>
</html>

A fenti példában a Grid konténer a grid-template-columns: 100px 1fr 2fr; beállítással három oszlopra van bontva: az első oszlop fix 100px széles, a második és harmadik oszlop frakciós egységekkel van definiálva. Az grid-template-areas segítségével területeket definiálunk, hogy egyszerűbb legyen az elemek elhelyezése. Az elemek elrendezését a grid-area tulajdonsággal határozzuk meg, így a "header", "main", "sidebar" és "footer" külön területekre kerülnek.

Grid Tulajdonságok Grid Elemeihez¶

grid-column és grid-row: Meghatározza, hogy a grid elem mely oszlopban és sorban helyezkedjen el, illetve milyen szélességű/magasságú legyen.
grid-column-start, grid-column-end, grid-row-start, grid-row-end: Részletesen meghatározhatjuk az elem pozícióját.
grid-area: Rövidítés, amellyel egy elem elhelyezkedését definiálhatjuk a grid területeken belül.

Példa:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Elemek Példa</title>
    <style>
        .grid-container {
            display: grid;
            background-color: lightgrey;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 100px auto;
            gap: 10px;
            padding: 10px;
        }

        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .grid-item1 { grid-column: 1 / 3; grid-row: 1; }
        .grid-item2 { grid-column: 3 / 5; grid-row: 1; }
        .grid-item3 { grid-column: 1 / 5; grid-row: 2; }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item grid-item1">1</div>
        <div class="grid-item grid-item2">2</div>
        <div class="grid-item grid-item3">3</div>
        <div class="grid-item grid-item4">4</div>
    </div>
</body>
</html>

Ebben a példában a Grid konténer négy egyenlő szélességű oszlopot és két sort tartalmaz. Az első két rácselem (grid-item1, grid-item2) az első sorban helyezkedik el, és mindegyik két oszlopot foglal el. A harmadik rácselem (grid-item3) a második sorban helyezkedik el és az egész sor szélességét kitölti. Az grid-column és grid-row tulajdonságok segítségével pontosan meghatározzuk az elemek pozícióját.

Reszponzív Design Grid Layouttal¶

A CSS Grid kiválóan alkalmazható reszponzív desigban, mivel lehetővé teszi a layout gyors és hatékony módosítását különböző képernyőméretekhez és eszközökhöz.

Példa: grid használata reszponzív design megvalósítására

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reszponzív Grid Layout Példa</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
            background-color: lightgrey;
            padding: 10px;
        }

        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }

        @media (max-width: 600px) {
            .grid-container {
                grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            }

            .grid-item {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

A fenti példában a Grid konténer automatikusan kitölti a rendelkezésre álló helyet a repeat(auto-fill, minmax(100px, 1fr)) beállítással. Az elemek minimum 100 pixel szélesek, de ha több hely áll rendelkezésre, akkor egyenlően oszlanak el. Az @media query segítségével a kisebb képernyőkön az elemek minimum szélessége 50 pixelre változik, és a padding is kisebb lesz. Ez biztosítja, hogy az elrendezés reszponzív és rugalmas legyen különböző készülékeken.

Utolsó frissítés: 2024-08-16 16:51:30