CSS Snippet Cheatsheet

Ever have trouble recalling the exact syntax for your favourite 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
Use these three properties to create a Flexbox row layout. 
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
Flexbox Column
Use this to create a Flexbox column layout. 
.column {
    display: flex;
    flex-direction: column;
}
CSS Grid Layout
Build a 12-column layout using CSS Grid. 
.grid {
    display: grid;
    width: 100%;
    grid-template-columns:
    repeat(12, 1fr);
}
Linear Gradients
This will create a background linea 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%);
}
Box Transition Glow
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 Opx Opx 8px 
rgba (232, 102, 236, 1), 0 0 15px 
rgba (232, 102, 236, 1);
                }
Overlay Card with Title
Use position properties and negative margins to raise eleents higher than their natural starting point. 
.card-header {
  position: relative;
  margin-top: -20px;
}