본문으로 건너뛰기

Creating Complex Layouts with Grid

Creating Complex Layouts with Grid

In the previous chapter, we looked at the basic structure of CSS Grid and a few fundamental properties.

In this chapter, we will explore how to utilize Grid for creating more complex layouts.


The Need for Complex Layouts

Now, you have learned how to divide a web page into multiple cells, similar to a chessboard.

However, in real websites, some cells are larger and others smaller; not every cell is uniformly sized.

To create such complex layouts, it is necessary to utilize the additional features of Grid.


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

  • grid-gap: Defines the spacing between the cells.
CSS
.container {
grid-gap: 10px;
}

  • grid-auto-rows, grid-auto-columns: Specifies the size of rows and columns that have not been defined.
CSS
.container {
grid-auto-rows: 100px;
grid-auto-columns: 200px;
}

Using grid-template-areas to Define Areas

This property helps to divide our web page into several 'areas'.

We typically use this to structure the large blocks of a webpage, such as the header, main content, sidebar, and footer.

CSS
.container {
grid-template-areas:
'header header header header header'
'sidebar main main main main'
'footer footer footer footer footer';
}

.header {
grid-area: header;
}

.sidebar {
grid-area: sidebar;
}

.main {
grid-area: main;
}

.footer {
grid-area: footer;
}

Positioning with Grid

justify-items, align-items, place-items

These properties determine how items are aligned within the grid cells.

  • justify-items: Aligns items along the horizontal axis.

  • align-items: Aligns items along the vertical axis.

  • place-items: Sets both of the above properties at once.

CSS
.container {
justify-items: center;
align-items: start;
}

/* or */

.container {
place-items: start center;
}

Follow the asterisk-highlighted part of the code to try inputting it.