본문으로 건너뛰기

Grid

Grid

A web page is much like a large canvas.

Just as when painting, you decide how to apply colors and where to place various elements, when creating a web page, you also need to decide where to position different elements.

To solve the increasingly complex layout placement issues, CSS Grid was developed.


Basic Structure and Characteristics of Grid

CSS Grid structures the layout like a chessboard grid.

A chessboard has multiple squares, and each square can hold a chess piece.

Similarly, CSS Grid divides a webpage into multiple regions, allowing you to freely place desired elements in each area.


Basic Structure of Grid

Grid Container and Grid Items

To use CSS Grid, you first need to define a Grid container and place Grid items inside it.

  • Grid Container: This refers to the entire grid that you will create.

  • Grid Item: These are the individual items that will go inside the grid.


Creating a Simple Grid Structure

CSS
.container {
display: grid;
}

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

In the code above, the element with the .container class becomes the Grid container, and its child elements become the grid items.

The items use the grid-column and grid-row properties to determine their own position within the grid.


Key Grid Properties

grid-template-columns, grid-template-rows

These properties divide the container into multiple columns and rows. You can specify how many columns and rows you want to split the container into horizontally and vertically.

CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 50px 50px;
}

The code above creates a grid divided into three columns and two rows.


grid-column, grid-row

This property specifies which grid cells the item will occupy by defining a starting point and an ending point.

CSS
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}

In the code above, the item is positioned from the first to just before the third column horizontally, and from the first to just before the second row vertically.


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