CSS Snippet Cheatsheet

Ever have trouble recalling the exact syntax for your favorite CSS code? Give it a permanent home and add it to this page! Select any snippet below and it'll automatically select all of the code for you to copy.

Flexbox Row

Items in a flexbox with direction "row" will be side by side.

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Flexbox Column

Items in a flexbox with direction "column" will be stacked.

.row {
    display: flex;
    flex-direction: column;
}

CSS Grid Layout

Build a 12-column layoute using CSS Grid.

.grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(12, 1fr):
}

Linear

This is my description

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

This is my header

This is my description

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

This is my header

This is my description

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

This is my header

This is my description

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

This is my header

This is my description

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

This is my header

This is my description

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}