Patryk Pawłowski

patryk.me

Podstawy Grafiki Interaktywnej

ASP Gdańsk

Foundation

XY Grid

Czym jest grid?

Patryk Pawłowski

ASP Gdańsk

fot. Kenny Luo (Unsplash) 

Czym jest grid?

Patryk Pawłowski

ASP Gdańsk

1

2

3

4

5

6

7

8

9

10

11

12

Prostokąt #1 – kontener

Patryk Pawłowski

ASP Gdańsk

Prostokąt #1 – kontener

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">

</div>

Prostokąt #2 – grid w osi X

Patryk Pawłowski

ASP Gdańsk

x

y

Prostokąt #2 – grid w osi X

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    
    </div>
</div>

x

Prostokąt #3 i #4 – kolumny (komórki)

Patryk Pawłowski

ASP Gdańsk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam turpis, tristique non nisi ac, eleifend suscipit mauris. Maecenas ac turpis faucibus, suscipit nisl sed, dapibus risus.

Prostokąt #3 i #4 – kolumny (komórki)

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell auto">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam turpis, tristique non nisi ac, eleifend suscipit mauris. Maecenas ac turpis faucibus, suscipit nisl sed, dapibus risus.
            </p>
        </div>
        
        <div class="cell auto">
            <img src="..." />
        </div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam turpis, tristique non nisi ac, eleifend suscipit mauris. Maecenas ac turpis faucibus, suscipit nisl sed, dapibus risus.

Przesunięcie

Patryk Pawłowski

ASP Gdańsk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam turpis, tristique non nisi ac, eleifend suscipit mauris. Maecenas ac turpis faucibus, suscipit nisl sed, dapibus risus.

1

2

3

4

5

6

7

8

9

10

11

12

Przesunięcie i rozmiar

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-offset-2 large-4">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam turpis, tristique non nisi ac, eleifend suscipit mauris. Maecenas ac turpis faucibus, suscipit nisl sed, dapibus risus.
            </p>
        </div>
        
        <div class="cell large-offset-1 large-4">
            <img src="..." />
        </div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam turpis, tristique non nisi ac, eleifend suscipit mauris. Maecenas ac turpis faucibus, suscipit nisl sed, dapibus risus.

1

2

3

4

5

6

7

8

9

10

11

12

2

4

4

1

Do poczytania

Patryk Pawłowski

ASP Gdańsk

ASP | Foundation XY Grid

By Patryk Pawłowski

ASP | Foundation XY Grid

ASP Gdańsk | Podstawy Grafiki Interaktywnej

  • 1,042