본문으로 건너뛰기

Advanced Grid Techniques

Advanced Grid Techniques

Commercial web services often employ complex layouts, necessitating knowledge beyond the basics of Grid usage.


Using Grid and Flexbox Together

Combining Grid and Flexbox can make layouts more efficient.

  • Grid: 2-dimensional (rows and columns) layout

  • Flexbox: 1-dimensional (row or column) layout

For instance, you can use Grid for the overall page layout and Flexbox for the smaller section layouts (e.g., a menu bar).

CSS
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}

.menu {
display: flex;
justify-content: space-between;
}

In the code above, .container uses Grid, and .menu uses Flexbox, taking advantage of each layout technique's strengths.


Fine-tuning the Layout

When creating complex layouts, there are times when you need to finely adjust the spacing or size between items.

  • minmax(): Specifies the minimum and maximum size of the grid items.

  • auto-fill and auto-fit: Automatically fill as many columns as possible in the container or adjust the size of the columns to fit the items.

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

The code above sets the minimum size of the columns inside .container to 200px and the maximum size to 1fr, while automatically filling as many columns as possible.


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