Version: 1.1
hypetech.pl
Układ treści

Układ kolumnowy

Klasa grid-row i pochodne jest podstawowym elementem pozwalającym na dzielenie elementu na kolumny.

grid-row - podział na kolumny

Klasa ustawia podział elementu na równe kolumny.

Klasa Styl CSS
grid-row 
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
--grid-row--cols: 12;
grid-row-<int> 
display: grid;
grid-template-columns: repeat(<int>, minmax(0, 1fr));
--grid-row--cols: <int>;
 
<div class="container py-4">
    <div class="grid-row-1 sm:grid-row-2 md:grid-row-4">...</div>
</div>

span - łączenie kolumn

Połączenie kilku kolumn w jedną wykonujemy stosując klasę span. Maksymalna liczba kolumn do połączenia jest ustawiona już na etapie dodawania podziału na kolumny, dlatego wskazanie w span większej liczby kolumn niż aktualnie wyświetlana (np. łączymy 6, a podział jest na 1) nie ma wpływu na układ.

Klasa Styl CSS
span-<int> 
--column-span: min(<int>, var(--grid-row--max-span));
grid-column: var(--column-start, auto) / span var(--column-span, 1);

<div class="container py-4">
    <div class="grid-row-1 sm:grid-row-2 md:grid-row-4">
        <div class="b span-4">...</div>
        <div class="b span-2">...</div>
        <div class="b span-2">...</div>
        <div class="b span-4">...</div>
        <div class="b">...</div>
        <div class="b">...</div>
        <div class="b">...</div>
        <div class="b">...</div>
    </div>
</div>

grid-row--hscroll - przwijanie poziome kolumn

Klasa pozwala na skonfigurowanie podziału kolumnowego na równe kolumny, które będą przwijane w poziomie. Pozwala na na stworzenie na mobile widoku z poziomym scrollem kolumn. Klasa działa tylko w połączeniu z grid-row.

Klasa Styl CSS
grid-row--hscroll-<int> 
// <int> wskazuje liczbę kolumn z podziału,
// które będzie łączył jeden blok
--col-width: calc(100% / var(--grid-row--cols) * <int>);
overflow-x: auto;
grid-auto-columns: var(--col-width);
grid-auto-flow: column;
grid-template-columns: repeat(1, var(--col-width));

<div>
    <!--  w-full       - szerokość 100% -->
    <!--  md:container - kontener od md -->
    <!--  py-4         - padding -->
    <div class="w-full md:container py-4">
        <!--  grid-row-12          - podział na 12 kolumn -->
        <!--  grid-row--hscroll-10 - włącz scroll poziomy i łącz blok w 10 kolumn -->
        <!--  md:grid-row--hscroll-6   - od md wyłącz scroll poziomy -->
        <!--  gap-4                 - odstęp kolumn 4 -->
        <div class="grid-row-12 grid-row--hscroll-10 md:grid-row--reset md:grid-row-2 gap-4">
            <div class="b">block 1</div>
            <div class="b">block 2</div>
            <div class="b">block 3</div>
            <div class="b">block 4</div>
            <div class="b span-2">block 5 (span in mobile)</div>
            <div class="b span-2">block 5 (span in mobile)</div>
        </div>
    </div>
</div>

grid-row--hscroll-reset - wyłączenie przewijania w poziomie

Klasa wyłącza poprzednio włączone przewijanie w poziomie grid-row--hscroll i przywraca domyślne działanie grid-row.

Klasa Styl CSS
grid-row--reset 
overflow-x: unset;
grid-auto-columns: unset;
grid-auto-flow: unset;

<div>
    <!--  w-full       - szerokość 100% -->
    <!--  md:container - kontener od md -->
    <!--  py-4         - padding -->
    <div class="w-full md:container py-4">
        <!--  grid-row-12          - podział na 12 kolumn -->
        <!--  grid-row--hscroll-10 - włącz scroll poziomy i łącz blok w 10 kolumn -->
        <!--  md:grid-row--reset   - od md wyłącz scroll poziomy -->
        <!--  md:grid-row-2         - od md podziel na 2 kolumny -->
        <!--  gap-4                 - odstęp kolumn 4 -->
        <div class="grid-row-12 grid-row--hscroll-10 md:grid-row--reset md:grid-row-2 gap-4">
            <div class="b">block 1</div>
            <div class="b">block 2</div>
            <div class="b">block 3</div>
            <div class="b">block 4</div>
            <div class="b md:span-2">block 5</div>
            <div class="b md:span-2">block 6</div>
        </div>
    </div>
</div>

col-start - ustawienie kolumny

Ustawienie kolumny w której ma rozpocząć się element umożliwia klasa col-start.

Klasa Styl CSS
col-start-<int> 
--column-start: min(<int>, var(--grid-row--max-span));
grid-column: var(--column-start, auto) / span var(--column-span, 1);

<div class="container py-4">
    <div class="container py-4">
        <div class="grid-row-1 sm:grid-row-2 md:grid-row-4">
            <div class="b">block</div>
            <div class="b col-start-3">block 3 column</div>
            <div class="b span-2">block span-2</div>
            <div class="b span-4">block span-4</div>
            <div class="b">block</div>
            <div class="b">block</div>
            <div class="b">block</div>
            <div class="b">block</div>
        </div>
    </div>
</div>

row-start - ustawienie wiersza

Ustawienie wiersza w którym pojawi się element.

Klasa Styl CSS
col-start-<int> 
grid-row-start: <int>

<div class="container py-4">
    <div class="grid-row-1 sm:grid-row-2 md:grid-row-4">
        <div class="b">block</div>
        <div class="b">block</div>
        <div class="b span-2">block span-2</div>
        <div class="b span-4">block span-4</div>
        <div class="b row-start-1 col-start-4">last block - 1 row, 4 column</div>
    </div>
</div>

Zmienna CSS ustawiane przez klasę

Element grid-row ustawia zmienną na elemencie:
--grid-row--cols - liczba kolumn
Dodatkowo dla każdego dziecka w grid-row ustawiana jest zmienna:
--grid-row--max-span - maksymalna liczba kolumn do połączenia