# Automatic Grid Like Masonry With Pure CSS • Obsidian Garden

# Automatic Grid Like Masonry With Pure CSS

Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.

    $cell: 250px;$gap: 20px;.grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));  grid-auto-rows: 256px;  grid-auto-flow: row dense;  grid-column-gap: $gap;  grid-row-gap: $gap;}

### Basic elements with double height or width

    .h-2 { // takes 2 columns    grid-column-end: span 2;}.v-2 { // takes 2 rows    grid-row-end: span 2;}

### Header, that fills all columns

    .full-width {  grid-row: 1 / 2; // height: 1 row  grid-column: 1 / -1;}

### Stamp element, that takes 3 rows in the top right corner

    .top-right {  grid-row: 1 / 3; // height here  grid-column: -2 / -1; // width here}