CSS Grid and Flexbox each have their own expertise, which works best together. Grid is a two-dimensional layout that is suitable for the overall page structure, such as the arrangement of the header, sidebar, main content area, and footer; Flexbox is a one-dimensional layout that is more suitable for the internal arrangement of components, such as navigation bar, button group, card list, etc. For example, use Grid in the middle of the three-column layout and then block up and down, and use Flexbox to automatically align several buttons in a row. The actual combination method is: the outer container uses display: grid to define the overall framework, and the child elements are arranged using display: flex in each area. Common structures include using Grid to divide blocks on the entire page, and using Flexbox to align elements inside the navigation bar, button group and card list. Note that you should not set Grid and Flexbox on the same container at the same time. After the parent uses Grid, the child needs to set display: flex separately to take effect. In the nested structure, you should also avoid maintenance difficulties due to too deep levels.

When you want to make a modern web layout, CSS Grid and Flexbox are the two most practical tools. They each have different scenarios, but when used together, they can solve most complex layout problems. The key is not who to choose, but who to use, but who to use.

When to use Grid, when to use Flexbox?

Simply put: Grid is a two-dimensional layout (controlled by rows and columns together) , which is suitable for the overall page structure, such as arranging the header, sidebar, main content area, and footer. Flexbox is a one-dimensional layout (only one row or one column is controlled at a time) , which is more suitable for internal arrangement of components, such as navigation bars, button groups, card lists, etc.

For example:

• If you make a three-column layout and can be divided up and down in the middle, then Grid is more suitable.
• If you just want a few buttons to line up and align automatically, Flexbox is more straightforward.

So, in a complete page, you can use Grid to divide the area on the outer layer and arrange elements on the inner layer with Flexbox .

How to use it in combination? Depend on the structure

Common practices are:

• Use display: grid to define the entire page frame
• Use display: flex in each area to arrange child elements

For example:

 .container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

In this way, the left column becomes a vertically distributed structure and will not affect the layout of other areas.

Common combination structures:

• The entire page is divided into partitions using Grid
• Use Flexbox for navigation bars and button groups
• Use Flexbox to align titles, pictures and other elements inside the card list

Note: Don't mess with direction and level

Although the two can be used together, be aware of some error-prone areas:

• Do not set Grid and Flexbox on a container, as only one will take effect
• The parent uses Grid. If the child wants to use Flexbox, it must set display: flex for the child separately.
• In the nested structure, try to keep the logic clear and not nest too deep, otherwise it will be troublesome to maintain.

Let me give you an example of actually trampling on tricks:

 <div class="grid-container">
  <div class="flex-box">
    <span>Item 1</span>
    <span>Item 2</span>
  </div>
</div>

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

.flex-box {
  display: flex;
  gap: 10px;
}

This is a good idea, but if you accidentally add a grid attribute to .flex-box , it will become a Grid container and Flex will fail.

Basically that's it. It may feel a little confused at first, but just remember: Grid controls the large structure, Flexbox is responsible for the arrangement of details , and then uses it separately at different levels, so it can easily handle most layout needs.

The above is the detailed content of How to use CSS Grid and Flexbox together tutorial. For more information, please follow other related articles on the PHP Chinese website!