Building attractive and responsive websites requires a solid understanding of Flexbox and CSS Grid.
If you’ve been writing CSS for some time, chances are good that you’ve at least heard of these terms. You may have used either or both to some extent. Both are powerful pieces of CSS with similar but subtly different use cases.
What is Flexbox?
Flexbox is a one-dimensional CSS layout method that has been around for some time. Flexbox can be thought of as a collection of related CSS properties that can be used to align HTML elements within a container and manage the space between them.
Before Flexbox, this type of layout was cumbersome and cumbersome to work with the float and position properties.
If you’re worried about browser support for Flexbox, don’t worry. According to caniuse.com, all modern browsers support Flexbox.
Flexbox basics
Flexbox contains many CSS properties, but the basics are very simple. Using flexbox always starts with declaring the parent container as a flex container. Display: Flex to that style rule. When you do this, all children of this element will automatically become flex items.
You can then use the flex-container to control the distribution of space within the flex-container. justify-content propertyThe placement of the .flex-item is Sort item property.
Here’s a code example that uses Flexbox to spread the space inside a container evenly between its children, centering everything in the container. This is HTML:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
This is CSS:
.container {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
border: 1px solid black;
height: 200px;
}
.container > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
Here is the output:
What is CSS Grid
CSS Grid is a layout system that complements Flexbox. Flexbox is powerful, but not well suited for certain kinds of layouts. Attempting to lay out the structure of an entire page using Flexbox becomes a frustrating task involving ugly, non-sematic markup and hacky CSS.
CSS Grid is not a replacement for Flexbox, but an alternative system in some situations.
CSS grid basics
The grid concept is simple. As the name suggests, CSS Grid allows you to divide the space within a parent container into a grid of rows and columns. Any number of rows/columns can be used. Then position the child items by referencing the lines of the parent’s grid.
Start by adding Display: Grid to the parent container. next, grid template row and grid template column Use properties to specify the rows and columns that divide the grid. after that, grid column and grid row Use child element properties to tell where it should be in the grid. Let’s look at an example grid that uses the previous five-element setup. However, it has a more complicated arrangement.
Here is the HTML:
<div class="container">
<div>1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
Here is the CSS:
.container {
display: grid;
width: 100%;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
border: 1px solid black;
height: 300px;
}
.container > div {
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
.container > .two {
grid-row: 2;
grid-column: 2;
}
Here is the output:
CSS Grid also includes many other properties that can be used to build more complex layouts.
Which should I use?
First, it’s important to note that nothing prevents using Flexbox and Grid together, and in some cases it’s the best choice. That said, let’s answer the question, which layout is the most suitable for implementing each of these systems?
Flexbox is great for building layouts that arrange elements side by side. Examples of this kind of layout include placing icons at the end of a section and placing links in the navigation bar.
Grids, on the other hand, work best when elements need to be positioned precisely relative to other elements (both horizontally and vertically). This arrangement is necessary for easy adaptation to different screen sizes.
As an illustration, here is the code you would need to write to recreate the layout from the Grid example using Flexbox.
HTML:
<div class="container">
<div class="sub one">
<div>1</div>
<div>5</div>
</div>
<div class="sub two">
<div>2</div>
</div>
<div class="sub three">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.container {
border: 1px solid black;
height: 300px;
}
.sub {
display: flex;
width: 100%;
}
.one, .three {
justify-content: space-between
}
.two {
justify-content: center;
}
.sub > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
Here is the output:
The main thing to note here is that this code produces the same output as the Grid example, but the markup here is much more complex. Implementing this layout requires a subcontainer, and the numbered divs must be placed out of order within the markup.
Further suppose that this layout needs to be moved to an awkward position. For example, align the 5th div with her 2nd div.If you were using Flexbox for this, you’d have to resort to Position: Relative or something similar.With grid, all you need is grid column property.
But in contrast, implementing a simple one-row alignment from the Flexbox example using a grid would require much more CSS. Grids are obviously not very suitable for such layouts.
Flexbox and Grid can mostly duplicate each other’s effects, but there are some exceptions. Overlapping elements is very difficult with Flexbox alone, but very easy with Grid. Grid also doesn’t allow you to use margin:auto to push elements away from other elements like Flexbox does.
Flexbox and Grid are powerful layout systems
Both Flexbox and CSS Grid are design systems that make it easy to lay out web page content. Grids are ideal for two-dimensional layouts that contain many elements that need to be positioned precisely relative to each other. Flexbox works well for one-dimensional or one-row layouts that require a set of elements to be arranged in a particular way.
