CSS Grid

Nomenklatura

grid cell

grid column

grid row

grid area

Dostępne właściwości

grid container

grid item

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items

align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self

.grid-container {
  display: -ms-grid; /* IE 10 */
  display: grid;
}

display: grid | inline-grid | subgrid;

grid-template-columns: <track size> | <line name> <track size>;
grid-template-rows: <track size> | <line name> <track size>;

.grid-container {
  grid-template-columns: [first] 200px [second 2-start] auto [third] 30% [last];
  grid-template-rows: 200px 400px 200px; 
  -ms-grid-columns: [first] 200px [second second-start] auto [third] 30% [last];
  -ms-grid-rows: 200px 400px 200px;
}

200px

400px

200px

auto

30%

[1]

[2]

[3]

[4]

[first]

[second second-start]

[third]

[last]

grid-template-columns: <track size> | <line name> <track size>;
grid-template-rows: <track size> | <line name> <track size>;

.grid-container {
  grid-template-columns: [start] repeat(2, 40% [column-line]) 20% [end];
}




.grid-container {
  grid-template-columns: 1fr 1fr 1fr; 
}




.grid-container {
  grid-template-columns: 1fr 10px 1fr;
}

grid-template-areas: none | . | <grid-area-name>;

.grid-container {
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "article article article sidebar"
    "banner banner . sidebar"
    "footer footer footer footer";
}

sidebar

header

article

banner

footer

empty

.grid-item-1 {
  grid-area: header;
}
.grid-item-2 {
  grid-area: sidebar;
}
.grid-item-3 {
  grid-area: article;
}
.grid-item-4 {
  grid-area: banner;
}
.grid-item-5 {
  grid-area: footer;
}

grid-template:

none | subgrid | <grid-template-rows> / <grid-template-columns>;

.grid-container {
   grid-template:
    [row1-start] "header header header" 100px [row1-end]
    [row2-start] "footer footer footer" 100px [row2-end]
    / 100px 50px 100px;
}

.grid-container {
  grid-template-rows:[row1-start] 100px [row1-end row2-start] 100px [row2-end];
  grid-template-columns: 100px 50px 100px;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

grid-column-gap: <size>;
grid-row-gap: <size>;

.grid-container {
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

10px

20px

grid-gap: <grid-row-gap> <grid-column-gap>;

.grid-container {
  grid-gap: 10px 20px;
}

10px

20px

justify-items: start | end | center | stretch;

.grid-container {
   justify-items: start;
   -ms-grid-column-align: start;
}

start

end

center

stretch

align-items: start | end | center | stretch;

.grid-container {
   align-items: end;
   -ms-grid-row-align: end;
}

start

end

center

stretch

.grid-container {
   justify-content: start;
}

start

end

center

stretch

space-around

space-between

space-evenly

.grid-container {
   align-content: start;
}

start

end

center

stretch

space-around

space-between

space-evenly

place-items: <align-items> / <justify-items> ;

.grid-container {
   place-items: start / center;
}

place-content: <align-content> / <justify-content> ;

.grid-container {
   place-content: center / center;
}

grid-auto-columns: <track size> <track size> <track size>;
grid-auto-rows: <track size> <track size> <track size>;

.grid-container {
  grid-auto-columns: 100px;
  grid-auto-rows: 200px;
}

50px

100px

.grid-item {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.grid-item

grid-auto-flow: row | column | dense;

.grid-container {
   grid-auto-flow: row;
}

row

column

<section class="grid-container">
  <div class="grid-item1">item1</div>
  <div class="grid-item2">item2</div>
  <div class="grid-item3">item3</div>
</section>

item1

item2

item3

item1

item2

item3

dense

item1

item2

item3

.grid-container {
  grid: 200px auto / 1fr auto 1fr;
}

.grid-container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

grid: none | <grid-auto-flow> | <grid-template> |

<grid-template-rows> / <grid-template-columns> ;

.grid-container {
  grid: 100px 300px / auto-flow 200px;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

.grid-container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.grid-container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

grid: none | <grid-auto-flow> | <grid-template> |

<grid-template-rows> / <grid-template-columns> ;

.grid-container {
   grid: [row1-start] "header header header" 1fr [row1-end]
         [row2-start] "footer footer footer" 25px [row2-end]
         / auto 50px auto;
}

.grid-container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;  
}

grid-column-start: <number> | <name> | span <number> | span <name> | auto

grid-column-end: <number> | <name> | span <number> | span <name> | auto

grid-row-start: <number> | <name> | span <number> | span <name> | auto

grid-row-end: <number> | <name> | span <number> | span <name> | auto

.grid-item {
  grid-column-start: 2;
  grid-column-end: span 3;
  grid-row-start: 2;
  grid-row-end: span 3-end;
}

.grid-item

3-end

grid-column: <start-line> / <end-line>;

grid-row: <start-line> / <end-line>;

.grid-item {
  grid-column: 3 / 5;
  grid-row: 1 / span 3; /* span 3 -> rozciągnij się na 3 komórki */
  -ms-grid-column: 3 / 5;
  -ms-grid-row: 1 / span 3;
}

.grid-item

grid-area: <name> |
<row-start> / <column-start> / <row-end> / <column-end>;

.grid-item {
  grid-area: 2 / 4 / 3-end / 6;
}

.grid-item

3-end

justify-self: start | end | center | stretch;

.grid-item {
   justify-self: start;
}

start

end

center

stretch

align-self: start | end | center | stretch;

.grid-item {
   align-self: end;
}

start

end

center

stretch

Przykład 1

responsywny layout strony

.grid-container {
  display: grid;
  grid-gap: 1%;
  grid-template-columns: 30% 34% 34%;
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
}


@media screen and (max-width: 760px) {
  .grid-container {
    grid-template-areas:
      "header  header  header"
      "content content content"
      "sidebar sidebar sidebar"
      "footer  footer  footer"; 
  }
}

header

content

footer

sidebar

header

content

footer

sidebar

Przykład 2

galeria zdjęć

  .grid-container {
    width: 450px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: 150px 150px 150px;
  }

  .grid-item {

  }