Patryk Pawłowski

patryk.me

Podstawy Grafiki Interaktywnej

ASP Gdańsk

Foundation

XY Grid

klasy pomocnicze

Szerokość komórki

Patryk Pawłowski

ASP Gdańsk

[rozmiar_ekranu]-[ilość_kolumn]

Ustawia szerokość komórki, aby wypełniała [ilość_kolumn].

Np. large-4

Mam klasę large-4, więc zajmuję tylko 4 kolumny.

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4">
            <p>Mam klasę large-4, więc zajmuję tylko 4 kolumny.</p>
        </div>
    </div>
</div>

Szerokość komórki

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4">
            <p>Mam klasę large-4, więc zajmuję tylko 4 kolumny.</p>
        </div>
        
        <div class="cell large-auto">
    	    <p>Mam klasę large-auto, więc zajmuję pozostałą przestrzeń (8 kolumn).</p>
        </div>
    </div>
</div>

[rozmiar_ekranu]-auto albo auto

Ustawia szerokość komórki automatycznie, wypełniając pozostałą przestrzeń.

Np. large-auto

Mam klasę large-auto, więc zajmuję pozostałą przestrzeń
(8 kolumn).

Mam klasę large-4, więc zajmuję tylko 4 kolumny.

Przesunięcie komórki

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4 large-offset-2">
    	    <p>Mam klasę large-4, więc zajmuję tylko 4 kolumny. Mam klasę large-offset-2, więc jestem przesunięty o 2 kolumny.</p>
        </div>
      
      	<div class="cell large-auto">
            <p>Mam klasę large-auto, więc zajmuję pozostałą przestrzeń (tym razem 6 kolumn).</p>
        </div>
    </div>
</div>

[rozmiar_ekranu]-offset-[ilość_kolumn]

Przesuwa komórkę o [ilość_kolumn].

Np. large-offset-2

Mam klasę large-4, więc zajmuję tylko 4 kolumny.

Mam klasę large-offset-2, więc jestem przesunięty o 2 kolumny.

Mam klasę large-auto, więc zajmuję pozostałą przestrzeń (tym razem 6 kolumn).

Kolejność komórek

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4 large-offset-2 large-order-2">
            <p>Mam klasę large-4, więc zajmuję tylko 4 kolumny. Mam klasę large-offset-2, więc jestem przesunięty o 2 kolumny. Mam klasę large-oder-2, więc pojawiam się na drugim miejscu, chociaż jestem w strukturze pierwszy.</p>
        </div>
      
      	<div class="cell large-auto large-order-1">
            <p>Mam klasę large-auto, więc zajmuję pozostałą przestrzeń (tym razem 6 kolumn). Mam klasę large-order-1, więc pojawiam się na pierwszym miejscu, chociaż w strukturze jestem drugi.</p>
        </div>
    </div>
</div>

[rozmiar_ekranu]-order-[ilość_kolumn]

Ustawia kolejność komórki.

Np. large-order-2

Mam klasę large-4, więc zajmuję tylko 4 kolumny.

Mam klasę large-offset-2, więc jestem przesunięty o 2 kolumny.

Mam klasę large-oder-2, więc pojawiam się na drugim miejscu, chociaż jestem w strukturze pierwszy.

Mam klasę large-auto, więc zajmuję pozostałą przestrzeń (tym razem 6 kolumn).

Mam klasę large-order-1, więc pojawiam się na pierwszym miejscu, chociaż w strukturze jestem drugi.

Do poczytania

Patryk Pawłowski

ASP Gdańsk

ASP | Foundation XY Grid — klasy pomocniczne

By Patryk Pawłowski

Made with Slides.com

ASP | Foundation XY Grid — klasy pomocniczne

ASP Gdańsk | Podstawy Grafiki Interaktywnej

  • 1,219

More from Patryk Pawłowski