Skip to main content

Basics - CSS Grid

Creating a basic grid​

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

Using grid area​

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 200px;
  grid-template-areas:
    "header header"
    "sidebar content";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}


Changing the order of grid items​

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.item {
  grid-row: 1;
}

.item:nth-child(2) {
  grid-column: 3;
}

.item:nth-child(3) {
  grid-column: 1;
}

Spanning grid items across multiple columns:​

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.item:nth-child(2) {
  grid-column: 2 / span 2;
}

Using grid with flexbox​

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 200px;
}

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

Creating a responsive grid​

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

Aligning grid items​

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

Changing the direction of the grid​

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
  grid-auto-flow: column;
}

Creating nested grids​

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.sub-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px;
  gap: 10px;
}

Creating a masonry layou​

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.item {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
}

Nested Grids​

.parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  .child-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
}

Auto Placement​

The grid-auto-flow property allows you to control the placement of grid items when there is no explicit placement defined. The default value is row, which places items in rows, but you can also use column to place items in columns.

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Grid Line Naming​

.grid-container {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [col3-end];
}

.grid-item {
  grid-column: col1-start / col3-end;
}

Grid Line Shorthand​

.grid-item {
  grid-column: 1 / span 2;
}