CSS Snippet Cheatsheet

Use these three properties to create a Flexbox row layout.

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

Use this to create a Flexbox column layout.

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

Build a 12-column layout using CSS Grid.

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

This will create a background linear gradient from top to bottom.

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

Use Transition and box shadows to glow on hover.

.code-card .card-header {
  border-radius: 8px;
  Transition: all 0.5s ease-in-out;
}
.code-card:hover,
.code-card:hover .card-header {
  box-shadow: inset 0px 0px 8px
  rgba(232, 202, 236, 1), 0 0 15px
  rgba(232, 102, 236, 1);
}

Use position properties and negative margins to raise elements higher than their natural starting point.

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