CSS Snippet Cheat Sheet

This is a little repository for some of our favorite CSS code snippets.

Flexbow Row

Utilize these three properties to produce a Flexbox row layout

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

CSS Grid Layout

Utilize these three properties to produce a CSS Grid layout

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

Linear Gradients

Utilize these three properties to produce a background linear gradient oriented top to bottom layout 

.linear-gradient-background {
  background-image:
  linear-gradient(
  rgba(101,102,236,0.3) 0%
  rgba(101,102,231,0.6) 100%
  );
}

Flexbox Column

Utilize these three properties to produce a Flexbox column layout

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

5

Utilize these three properties to produce a Flexbox row layout

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

6

Utilize these three properties to produce a Flexbox row layout

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

7

Utilize these three properties to produce a Flexbox row layout

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