CSS Grid and Flexbox Cheatsheet

CSS Grid

Properties for Grid Container

Property	Description	Example
display: grid;	Defines a grid container	display: grid;
grid-template-rows	Defines the row structure of the grid	grid-template-rows: 100px auto 1fr;
grid-template-columns	Defines the column structure of the grid	grid-template-columns: repeat(3, 1fr);
grid-gap / gap	Defines the space between grid rows and columns	gap: 20px;
grid-template-areas	Defines grid layout using named areas	Refer to grid-template-areas example
justify-items	Aligns grid items horizontally within their cell	justify-items: center;
align-items	Aligns grid items vertically within their cell	align-items: stretch;
justify-content	Aligns the entire grid horizontally	justify-content: space-around;
align-content	Aligns the entire grid vertically	align-content: space-between;

Properties for Grid Items

Property	Description	Example
grid-column	Specifies the column span or placement of a grid item	grid-column: 1 / 3;
grid-row	Specifies the row span or placement of a grid item	grid-row: 2 / span 3;
grid-area	Places an item in a named grid area	grid-area: header;
justify-self	Aligns an item horizontally within its cell	justify-self: end;
align-self	Aligns an item vertically within its cell	align-self: center;

Grid Example

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
  grid-template-areas: 
    "header header header"
    "sidebar main main";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

CSS Flexbox

Flexbox is a one-dimensional layout system for arranging items in rows or columns.

Flexbox Container Properties

Property	Description	Example
display: flex	Defines a container as a flexbox.	display: flex;
flex-direction	Defines the direction of the main axis (row or column).	flex-direction: row-reverse;
justify-content	Aligns items along the main axis (horizontal for row).	justify-content: space-around;
align-items	Aligns items along the cross-axis (vertical for row).	align-items: center;
align-content	Aligns rows in a multi-line flex container.	align-content: space-between;
flex-wrap	Specifies whether items should wrap onto multiple lines.	flex-wrap: wrap;
gap	Defines spacing between flex items.	gap: 15px;

Flexbox Item Properties

Property	Description	Example
order	Specifies the order of the item in the container.	order: 2;
flex-grow	Defines how much an item grows relative to others.	flex-grow: 1;
flex-shrink	Defines how much an item shrinks relative to others.	flex-shrink: 0;
flex-basis	Defines the default size of an item before flexing.	flex-basis: 200px;
flex	Shorthand for flex-grow, flex-shrink, and flex-basis.	flex: 1 0 auto;
align-self	Aligns an individual item on the cross-axis.	align-self: flex-end;

---

Example: Flexbox Layout

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.item {
  flex: 1;
  order: 2;
}