1 min read 125 words Updated Sep 24, 2026 Created Sep 24, 2026
#CSS

Space between columns and rows are gaps.

row-gap: none; 
column-gap: none; 
gap: none; 

Placing an item:

grid-column-start: 1;  
grid-column-end: 3;
 ```


## Grid template
This is a shorthand property that combines `grid-template-rows`, `grid-template-columns`, and `grid-template-areas`. 

For example: 

```css
display: grid;

grid-template-columns: 1fr 2fr 1fr;

grid-template-rows: 50px 50px;

grid-gap: 3px;

Can be used to lay out a grid, e. g.

grid-template: 
            "a a a" 40px
            "b c c" 40px
            "b c c" 40px / 1fr 1fr 1fr;

Grid template areas

Units

The fraction unit fr is useful for designing grids. e. g.
grid-template-columns: 1fr 2fr 1fr;makes so that the middle part takes allways 50% of the width for its column.

Placing items

Centering the items: place-items: center