# Grid With flexbox items are treated together in columns and rows. With grid instead it's possible to position each item independently. While flexbox positions items on one axis (row or column), grid can position items on both axis. On one hand this gives control, on the other hand it takes time to define the item's position, especially if the layout for small devices differs from the one for large devices. But grid offers more flexibility. This is an example layout grid. You can access each cell in the grid independently and group cells together. They are addressed by their index, starting with 1. (See the numbers inside the `[]`.) ![grid_csstricks_grid](img/grid_csstricks_grid.png) [Source](https://css-tricks.com/snippets/css/complete-guide-grid/) The base for a grid is a parent container with `display` property `grid`. ```css .grid-container { display: grid; } ``` The layout of the grid is defined in the `.grid-container` through `grid-template-columns` and `grid-template-rows`. Depending on your layout it's enough to define the columns. ## Basic example ```html Grid Intro
item 1
item 2
item 3
item-4
```
`style.css` ```css * { box-sizing: border-box; } body { font-family: monospace; font-size: 14pt; margin: 0; /* to avoid white space around */ } .grid-container { display: grid; grid-template-columns: auto; height: 100vh; /* for full size container */ } @media (min-width: 768px) { .grid-container { grid-template-columns: repeat(2, auto); } } .item { /* justify text center */ display: flex; align-items: center; justify-content: center; text-align: center; } .item-text { color: white; } .item-1 { background-color: rgb(9, 102, 72); } .item-2 { background-color: rgb(104, 121, 65); } .item-3 { background-color: rgb(251, 143, 241); } .item-4 { background-color: rgb(170, 166, 244); } ```
See the line `repeat(2, auto);`: `repeat` can be used to define the layout of the grid with the syntax ```css repeat(number of columns/ number of rows, width of the column) ``` ![grid_basic_1](img/grid_basic_1.jpg)
### Different col width `index.html` ```html Grid Intro
item 1
item 2
item 3
item-4
item 5
item-6
item-7
item 8
item-9
```
`style.css` ```css * { box-sizing: border-box; } body { font-family: monospace; font-size: 14pt; margin: 0; /* to avoid white space around */ } .grid-container { display: grid; grid-template-columns: auto; height: 100vh; /* for full size container */ } /* Grid for larger devices: */ @media (min-width: 768px) { .grid-container { grid-template-columns: auto 50% auto; grid-column-gap: 10px; grid-row-gap: 10px; } } .item { /* justify text center */ display: flex; align-items: center; justify-content: center; text-align: center; } .item-text { color: white; } .item-1 { background-color: rgb(9, 102, 72); } .item-2 { background-color: rgb(104, 121, 65); } .item-3 { background-color: rgb(251, 143, 241); } .item-4 { background-color: rgb(170, 166, 244); } .item-5 { background-color: rgb(115, 85, 40); } .item-6 { background-color: rgb(105, 22, 224); } .item-7 { background-color: rgb(182, 80, 191); } .item-8 { background-color: rgb(90, 138, 230); } .item-9 { background-color: rgb(235, 149, 21); } ``` ![grid_basic_2](img/grid_basic_2.jpg) ### Different row height Code as above except: ```css /* Grid for larger devices: */ @media (min-width: 768px) { .grid-container { grid-template-columns: auto 50% auto; grid-template-rows: 15% auto 10%; grid-column-gap: 10px; grid-row-gap: 10px; } } ```
![grid_basic_3](img/grid_basic_3.jpg) ## Items are independent The real strength of CSS grid is that the items are independent from the grid! This means we can specify position and size of each item through CSS. Example on a large device: ![grid_basic_4](img/grid_basic_4.jpg) The same grid on a small device: ![grid_basic_5](img/grid_basic_5.jpg) Corresponding code: `index.html` ```html Grid Intro
item 1
item 2
item 3
item-4
item 5
item-6
item-7
```
`style.css` ```css * { box-sizing: border-box; } body { font-family: monospace; font-size: 14pt; margin: 0; /* to avoid white space around */ } .grid-container { display: grid; grid-template-columns: auto auto; grid-column-gap: 10px; grid-row-gap: 10px; height: 100vh; } /* Grid for larger devices: */ @media (min-width: 768px) { .grid-container { grid-template-columns: auto 50% auto; grid-template-rows: 15% auto 10%; } } .item { /* justify text center */ display: flex; align-items: center; justify-content: center; text-align: center; } .item-text { color: white; } .item-1 { background-color: rgb(9, 102, 72); grid-column: 1 / 3; } .item-2 { background-color: rgb(104, 121, 65); } .item-3 { background-color: rgb(251, 143, 241); } .item-4 { background-color: rgb(170, 166, 244); grid-column: 1 / 3; } .item-5 { background-color: rgb(115, 85, 40); } .item-6 { background-color: rgb(105, 22, 224); } .item-7 { background-color: rgb(182, 80, 191); grid-column: 1 / 3; } @media (min-width: 768px) { .item-1 { grid-column: 2 / 3; grid-row: 1/ 2; } .item-2 { grid-column: 1 / 2; grid-row: 1 / 2 } .item-3 { grid-column: 3 / 4; grid-row: 1/ 2 } .item-4 { grid-column: 2 / 3; grid-row: 2 / 3; } .item-5 { grid-column: 1 / 2; grid-row: 2 / 4; } .item-6 { grid-column: 3 / 4; grid-row: 2 / 4; } .item-7 { grid-column: 2 / 3; grid-row: 3/ 4; } } ``` ## Example of responsive reordering Layout on large devices: ![grid_lg](img/grid_lg.jpg)
Layout on small devices. While both layouts are possible with rows and columns, the transition of the red image between large and small layout is not possible that way, because the item would belong to different rows in the upper and lower layouts. ![grid_sm](img/grid_sm.jpg)
`index.html` ```html Writing an own website

writing
an own
website

writing an own website

A flower needs some water

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

screenshot of radematic.com

A computer needs some code

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

```
`style.css` ```css * { box-sizing: border-box; } body { font-family: 'Vollkorn'; font-size: 1.5em; background-color: rgb(33, 34, 32); color: rgb(33, 34, 32); margin: 0; } /* --- GRID --- */ .grid-container { display: grid; grid-template-columns: auto auto auto; /* 3 columns */ grid-column-gap: 10px; grid-row-gap: 20px; margin: 20px 10px 20px 10px; } .grid-container > div { background-color: rgb(249, 243, 228); padding: 50px; } .item-1 { grid-column-start: 1; grid-column-end: 3; } .item-2 { grid-row-start: 2; grid-row-end: 4; } .item-3 { grid-column-start: 2; grid-column-end: 4; } .item-4 { grid-row-start: 4; grid-column-start: 1; grid-column-end: 4; } @media (max-width: 992px) { .grid-container { grid-template-columns: auto auto; } /* writing an own website */ .item-1 { grid-column-start: 1; grid-column-end: 3; } /* a computer needs some code */ .item-2 { grid-row-start: 3; grid-column-start: 1; grid-column-end: 3 } /* designsystems_international */ .item-3 { grid-row-start: 4; grid-column-start: 2; grid-column-end: 3; } /* terra0 */ .item-4 { grid-row-start: 5; grid-column-start: 1; grid-column-end: 3; } } /* --- ITEMS --- */ h1, h2 { font-family: 'Montserrat'; color: salmon; text-align: center; } h1 { font-size: 3.5vw; } h2 { font-size: 32pt; } p { padding: 10px; text-align: justify; text-indent: 16pt; } a { text-decoration: none; } .img-center-helper { display: inline-block; height: 100%; vertical-align: middle; } img { width: 100%; vertical-align: middle; } /* --- DISPLAY --- */ .display_lg { display: block; } .display_sm { display: none; } @media (max-width: 992px) { .display_lg { display: none; } .display_sm { display: block; } } ``` ## References [CSS-Tricks – A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) [CSS-Tricks – A responsive grid layout with no media queries](https://css-tricks.com/a-responsive-grid-layout-with-no-media-queries/) [CSS-Tricks – CSS Grid Starter Layout](https://css-tricks.com/snippets/css/css-grid-starter-layouts/)