Grid Layout

container

display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px;

grid-row-gap: 30px;
grid-column-gap: 30px;
grid-gap: 30px;

grid-template-rows: 100px 400px;
grid-template-rows: repeat(5, 200px)
grid-template-columns: repeat(2, 200px) 400px;

grid-template-columns: repeat(2, 200px) 1fr;
grid-temlate-columns: repeat(3, 1fr);
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 50% 1fr 1fr;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

1fr – obejmuje całą dostępną przestrzeń

tracks for rows and columns

Positioning Grid Items

.item_1
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;

lub:

grid-row: 2 / 3;
grid-column: 2 / 3;

grid-column: 1/-1; – cala powierzchnia szerokości strony

lub:

grid-area: 1 / 3 / 2 / 4;
grid-row: 1 / 2;
grid-column: 3 / 4;

grid-area: row start / column start / row end / column end

Aby komórka zajmowała wiecje niż 1 row lub column:
grid-row: 2 / 4 – na dwa rzędy
grid-column: 1 / 3 – na dwie kolumny

.item_1
grid-row: 2 / 3;
grid-column: 2 / 3;

.item-3
grid-row: 2 / 3
grid-column: 1 / 3;

3 będzie zawierał się w 2 pierwszych kolumnach w rzędzie 2
1 będzie w drugiej kolumnie 2 rzedu pod 3 – chyba że damy z-index: 2 wtedy będzie nałożony na 3

grid-column: 1 / span 3; – zajmie 3 kolumny

grid-column: 2 / -1; – zajmie od 2 do końca, nie zależnie ile jest kolumn (ale tylko zadeklarowanych kolumn)

kiedy damy więcej kolumn lub rzedów niż jest zdwfiniowanych dokłada odatkowe kolumny / rzędy, kolumna wielkości zawartego w niej tekstu, rząd o 0 szerokości.

LINE NAME

grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];
grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];

.header
grid-column: col-start 1 / grid-end;

.box_aside
grid-column: grid-end 3 / grid-nd;
grid-row: box-start / main-end;

NAMING GRID AREAS

.container
grid-template-areas: „head head head head”
„box box box side”
„main main main side”
„foot foot foot foot”

.header
grid-area: hed

.main
grid-area: main

.footer
grid-area: foot

Pusta przestrzeń

.container
grid-template-areas: „head head head .”
„box1 box2 box3 side”
„main main main side”
„foot foot foot foot”

.box1
grid-area: box1
.box2
grid-area: box2
.box3
grid-area: box3

Explicit Grid and Implicit Grid

komórki które są zadeklarowane w markupie ale nie sa uwzględnione w definicji templatki w css zajmuja najmniejszą dowolną przestzeń, aby zmienić domyślne wratości:
grid-auto-rows: 80px
grid-auto-columns: .5fr

dodatkowe komórki defaultowo dodawane są jako kolejne wiersze aby to zmienić:
grid-auto-flow: column

wtedy kolejność elementów idzie wg kolumn nie rzedów

Align grid items to grid areas

align-items – nadawany na kontener, wyrównuje vertykalnie (column axis) kontent względem komórki/area (grid cell/grid area)

• stretch – default
• center
• end
• start

justify-items – nadawany na kontener, wyrównuje horyzontalnie (row axis) kontent względem komórki/area (grid cell/grid area)

• stretch – default
• center
• end
• start

align-items – nadawany na komórkę, wyrównuje vertykalnie (column axis) kontent względem komórki/area (grid cell/grid area)

• stretch – default
• center
• end
• start

justify-items – nadawany na komórkę, wyrównuje horyzontalnie (row axis) kontent względem komórki/area (grid cell/grid area)

• stretch – default
• center
• end
• start

place-items – łączy justify-items i align-items

.item {
	display: grid;
	align-items: start;
	justify-items: center;
}
.item {
	display: grid;
	place-items: start;
}

Align grid tracks to grid container

justify-content – cały Tracks

• start- default
• center
• end
• space-between
• space-around
• space-evenly

align-content

• start- default
• center
• end
• space-between
• space-around
• space-evenly

 

Wyrównanie kiedy mamy pusta komórkę

grid-auto-flow: row dense

Wielkość kolumny

grid-template-columns: max-content 1fr 1fr 1fr

max-content – wielkość taka jak kontent

grid-template-rows: repeat(2, minmax(150px, min-content))

minmax() – wartość pomiędzy wskazanym zakresem

grid-template-columns: minmax(200px, 300px) repeat(3, 1fr) – pierwsza kolumna zawsze będzie między 200px a 300px, nawet przy wąskim oknie wielkość nie zejdzie poniżej 200px

Auto-fill, auto-fit

nie jest zależne od ilości podanej kolumn
width: 1000px
grid-template-columns: repeat(auto-fill, 100px)
tworzy 10 tracków – kolumn, każdy szerokości 100px

width: 1000px
grid-template-columns: repeat(auto-fit, 100px)
tworzy też 10 (1000px/100px) ale ostatnie dodaje jako 0px width

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) – jeśli jest 8 itemów wypełniaja cała przestrzeń

kiedy szerokość contenera zmniejszy się dalsze komórki spadają do nowego rzędu

///working
grid-template-rows: 80vh min-content auto
min-content i auto to to samo, dopasowuje się do ilości tekstu

subgrid – kolumny subgrida korzystają z kolumn grida

 

grid.malven.co