CSS Layout Cheat Sheet

A CSS layout cheat sheet is helpful for designing the structure and arrangement of elements on a webpage. Here’s a reference covering key CSS properties for common layout scenarios:

Box Sizing

Border Box:

* {
  box-sizing: border-box;
}

Flexbox

Flex Container:

.flex-container {
  display: flex;
}

Flex Direction:

.flex-container {
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

Justify Content:

.flex-container {
  justify-content: space-between; /* or center, flex-start, flex-end */
}

Align Items:

.flex-container {
  align-items: center; /* or flex-start, flex-end, stretch */
}

Flex Items:

.flex-item {
  flex: 1; /* or any value */
}

Ordering Flex Items:

.flex-item {
  order: 2; /* or any integer value */
}

Grid

Grid Container:

.grid-container {
  display: grid;
}

Grid Template Columns:

.grid-container {
  grid-template-columns: 1fr 2fr; /* or any values */
}

Grid Template Rows:

.grid-container {
  grid-template-rows: 100px auto; /* or any values */
}

Column and Row Gap:

.grid-container {
  gap: 10px; /* or any values */
}

Positioning

Relative Positioning:

.relative {
  position: relative;
  top: 10px; /* or any values */
  left: 20px; /* or any values */
}

Absolute Positioning:

.absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Fixed Positioning:

.fixed {
  position: fixed;
  top: 0;
  right: 0;
}

Responsive Design

Media Query:

@media screen and (max-width: 600px) {
  /* CSS rules for screens with a maximum width of 600px */
}

Fluid Images:

img {
  max-width: 100%;
  height: auto;
}

Responsive Font Sizes:

body {
  font-size: 16px;
}

@media screen and (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

Centering

Center Horizontally:

.center-horizontally {
  margin: 0 auto;
}

Center Vertically:

.center-vertically {
  display: flex;
  align-items: center;
}

Center Both Horizontally and Vertically:

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

This cheat sheet provides a quick reference for key CSS layout properties and techniques. Adjust the values based on your specific layout requirements.