Skip to main content
Practice

Creating Complex Layouts with Grid

With Grid layout, you can divide a web page into multiple cells, much like a chessboard.

However, in actual websites, you'll often find that some cells are larger while others are smaller. Not all cells are uniformly aligned.

To create such complex layouts, you'll need to utilize additional Grid features.


grid-gap, grid-auto-rows, grid-auto-columns​

  • grid-gap: Defines the space between the cells.
CSS
.container {
  grid-gap: 10px; /* Sets the space between cells to 10px */
}

  • grid-auto-rows, grid-auto-columns: Specifies the size of undefined rows or columns.
CSS
.container {
  grid-auto-rows: 100px; /* Sets the row size to 100px */
  grid-auto-columns: 200px; /* Sets the column size to 200px */
}

fr Unit​

The fr unit is used in CSS Grid Layout to divide up available space within the Grid Container.

fr stands for fraction, representing a portion of the available space in the grid tracks.

For example, you can use the fr unit for columns or rows in a CSS grid layout:

.container {
  display: grid; /* Creates a grid container */
  grid-template-columns: 1fr 2fr 1fr; /* Creates 3 columns, center column is twice as wide as the side columns */
}

In this example, the grid container consists of 3 columns, with the center column being twice as wide as the side columns.

1fr represents one part of the available space, and 2fr represents two parts of the available space.

Thus, the entire space is divided into 4 parts, with the center column taking up half of the entire space.


Grid Item Alignment​

  • justify-items: Aligns items along the horizontal axis

  • align-items: Aligns items along the vertical axis

  • place-items: Combines the above two properties into one

CSS
.container {
  justify-items: center; /* Aligns items to the center along the horizontal axis */
  align-items: start; /* Aligns items to the start along the vertical axis */
}

/* or */

.container {
  place-items: start center; /* Aligns items to the start along the vertical axis and to the center along the horizontal axis */
}

Follow the highlighted portions of the code to practice.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.