Both Flex layout and Grid layout in CSS are very powerful layout solutions, so when should Grid layout be used and under what circumstances should Flex layout be used? In this article, let's take a look at the difference between the two and the usage scenarios through some examples!
Difference between Grid and Flexbox
Grid is a two-dimensional layout model that has columns and rows. Flexbox, on the other hand, is a one-dimensional layout model that can lay out its children as columns or rows, but not both.
/* Flexbox */
.wrapper {display: flex;
}
/* Grid */
.wrapper {display: grid;grid-template-columns: 2fr 1fr;grid-gap: 16px;
}
As you can see, Flexbox is laying out an inline list of elements (layouting a row of elements), while CSS Grid is making them into a grid of columns and rows. Of course, you can also use the Flexbox layout to lay out a column of elements:
/* Flexbox */
.wrapper {display: flex;flex-direction: column;
}
How to decide which to use?
When choosing one of these layouts, consider the following questions:
- How are the components' children displayed? Inline or as columns and rows?
- How do components display on screens of various sizes?
In most cases, if a component's children are displayed inline, a flexbox layout might be the best solution. Consider the following components:
This component contains two child elements that need to be displayed in one line, which is very suitable for using Flex layout.
If the layout requires multiple columns and rows, the Grid layout is the most suitable solution. Consider the following components:
After reading these examples, let's learn how to decide which layout scheme to use through some specific examples.
scenes to be used
CSS Flexbox
(1) Website navigation
Most of the time, website navigation can be built using CSS Flexbox. The most common pattern is the website logo on the left, website navigation on the right, and a blank space in the middle. Flex can easily achieve this layout:
The layout code is as follows:
.site-header {display: flex;flex-wrap: wrap;justify-content: space-between;
}
(2) Operation list
Action lists typically consist of a set of action buttons that can be performed, arranged in a row:
It can be seen that these operation buttons are adjacent and distributed horizontally. This situation is very suitable for using Flex to layout:
.actions-list {display: flex;
}
.actions-list__item {flex: 1;
}
The following scenario involving a title bar or action bar is also suitable for flex layout:
Both the header and footer of this component have child elements displayed inline. For the header, the layout code is as follows:
.modal-header {display: flex;justify-content: space-between;
}
For the footer, the Cancel button is special and can be pushed to the right using an automatic left margin.
.cancel__action {margin-left: auto;
}
(3) Form elements
In the first component in the image below, the combination of an input box on the left and a button on the right is a perfect use case for a flexbox layout:
In the second component, the layout can also be done quickly using Flex. Here the input box takes all the remaining space and it has a dynamic width. The layout code is as follows:
.input {flex: 1 1 auto;
}
(4) Comment component
Another common use case for Flexbox is commenting components. Consider the following example:
Here the left side is the user's avatar, and the right side is the comment content, which occupies the remaining space of the parent element.
(5) Card components
There are many types of card components, the most common card designs are as follows:
The card component on the left is laid out up and down, and the direction of the flex container is column. The card component on the right is a left-right layout. At this time, the direction of the flex container is row, which is the default value of the flex layout direction.
.card {display: flex;flex-direction: column;
}
@media (min-width: 800px) {.card {flex-direction: row;}
}
Another kind of card, with text below the icon, it can be a button, link. Flex layout is also applicable in this mode:
The layout code for the first mode is as follows:
.card {display: flex;justify-content: center;
}
The layout code for the second mode is as follows:
.card {display: flex;flex-direction: column;align-items: center;
}
(6) Tab menu
Flexbox is also the perfect solution when it comes to elements that take up the entire width of the screen and have items that should fill all available space.
Here, each item should fill the available space and their widths should be equal. This is easily done by setting the container element's displayproperty to flex.
.tabs__item {flex-grow: 1;
}
(7) Function list
A very useful feature of Flexbox is the ability to reverse the orientation of elements. By default, the direction of flexbox is from left to right row, we can reverse it like this:
.item {flex-direction: row-reverse;
}
In the following example, this function is very useful:
When laying out, you can use the above-mentioned direction-reversing attribute value for elements in even-numbered rows.
(8) Center the content
Suppose there is a component whose content needs to be centered horizontally and vertically. The horizontal centering of the text can be achieved through text-align.
.hero {text-align: center;
}
You can use flexbox layouts to center content horizontally and vertically:
.hero {display: flex;flex-direction: column;align-items: center; /* 水平居中 */justify-content: center; /* 垂直居中 */
}
CSS Grid
(1) Sidebar + content area
Grid layout is a perfect solution when there are sidebars and content areas. Consider the following components:
It can be defined like this in CSS:
<div class="wrapper"><aside>Sidebar</aside><main>Main</main>
</div>
@media (min-width: 800px) {.wrapper {display: grid;grid-template-columns: 200px 1fr;grid-gap: 16px;}aside {align-self: start;}
}
If <aside>the element is not used align-self, it will have the same height as mainthe element , regardless of content-length.
(2) Card Grid
Grid layout can be well understood from the name, it is very suitable for layout card grid:
The layout code is as follows:
.wrapper {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 16px;
}
Here the column width is at least 200px, and it will wrap the cards if there is not enough space. The above layout will scroll horizontally if the viewport width is less than 200px.
We can add the grid layout definition only if the viewport is wide enough:
@media (min-width: 800px) {.wrapper {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 16px;}
}
(3) Partial layout
In the design below, the grid layout can be used twice. The first time divides the whole area into left and right two areas (sidebar on the left, form on the right), and the second time uses a grid layout in the form.
The layout code is as follows:
@media (min-width: 800px) {.wrapper {display: grid;grid-template-columns: 200px 1fr;}.form-wrapper {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 16px;}.form-message,.form-button {grid-column: 1 / 3;}
}
Using Grid with Flexbox
The scenarios where the two layouts are used alone are described above, and of course the two layouts can also be used in combination. Consider the following example, for the card list, you can use the Grid layout, and for each card component, you can use the Flexbox layout:
The following are the requirements for the layout:
- The height of each row of cards should be equal;
- The Read more link should be at the end of the card, with a variable height;
- Grid should use
minmax()the function
<div class="wrapper"><article class="card"><img src="sunrise.jpg" alt="" /><div class="card__content"><h2><!-- Title --></h2><p><!-- Desc --></p><p class="card_link"><a href="#">Read more</a></p></div></article>
</div>
@media (min-width: 500px) {.wrapper {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 16px;}
}
.card {display: flex; /* [1] */flex-direction: column; /* [2] */
}
.card__content {flex-grow: 1; /* [3] */display: flex; /* [4] */flex-direction: column;
}
.card__link {margin-top: auto; /* [5] */
}
For the code above:
1. The card element is used as the container of Flexbox;
2. The layout direction is column, which means that the card elements are distributed vertically;
3. Let the content of the card expand and fill the remaining space;
4. The content of the card is used as the container of Flexbox;
5. Use margin-top: auto Push the link down, this will keep it at the end regardless of the card height.
It can be seen that the combination of Grid and Flexbox is not difficult, and most layouts of daily development can be easily realized by using them.
at last
A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).
Friends in need, you can click the card below to receive and share for free