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
