Positioning elements correctly on a web page is a daily task for every frontend developer. A few years ago this work was done with considerable effort using techniques such as float and position, since these were originally designed not for layout at all but for entirely different purposes. Today, however, CSS offers us two powerful and purpose-built layout systems: Flexbox and Grid. Both technologies form the foundation of modern interface construction, and a deep understanding of them is essential for every developer working on the web.
Many beginners get confused when choosing between Flexbox and Grid. In reality, these two technologies are not competitors but rather complementary tools that work beautifully together. Once you grasp their fundamental difference, you will be able to make the right decision in any given situation. In this article we will take a detailed look at the basics of both systems, how they differ from one another, and how they cooperate in real-world projects.
Flexbox and Grid: What Is the Key Difference?
The most important distinction can be expressed in a single sentence: Flexbox is a one-dimensional layout system that arranges elements along a single axis only โ either in a row (horizontally) or in a column (vertically). Grid, on the other hand, is a two-dimensional system that lets you control elements along both rows and columns at the same time. In other words, with Grid you build a complete tabular structure, managing placement in both directions simultaneously.
How does this difference manifest in practice? If you need to line up the links in a navigation menu in a single row, place buttons side by side, or center the inner elements of a card, then Flexbox is the best choice. If, however, you want to organize the overall structure of an entire page โ sections such as the header, sidebar, main content, and footer โ as a single cohesive whole, then Grid provides a far more convenient and logical approach.
Flexbox Fundamentals
To start working with Flexbox, you simply give the parent element (the container) the display: flex property. After that, all of its direct children become flex items, and you can control them using various properties. The most commonly used ones are the following: justify-content manages distribution along the main axis, align-items handles alignment along the cross axis, and gap sets the spacing between elements.
.container {
display: flex;
justify-content: space-between; /* horizontal distribution */
align-items: center; /* vertical centering */
gap: 16px; /* spacing between items */
}
.item {
flex: 1; /* each item takes equal space */
}In the example above, justify-content: space-between distributes the items evenly across the width of the container, pushing the first and last items to the edges. The align-items: center property aligns them to the vertical center. The value flex: 1 instructs each child to take an equal share of the available free space, which is extremely useful when creating flexible columns. The greatest strength of Flexbox is that it automatically adapts to the size of its content.
Grid Fundamentals
To work with Grid, the container is given display: grid, after which the column structure is defined through grid-template-columns. Here the fr (fraction) unit is of particular importance. It distributes the available free space in given proportions: for example, 1fr 2fr means the first column will be twice as narrow as the second. The gap property, just as in Flexbox, controls the spacing between rows and columns.
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* three columns */
grid-template-rows: auto;
gap: 20px;
}
/* grid-area for a complex structure */
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }In the second example, using the grid-template-areas property, we essentially drew a visual map of the page in text form. This approach makes the code remarkably readable, because right inside the CSS you can see exactly which element goes where. Each named area is attached to its element through the grid-area property. It is precisely in creating these complex two-dimensional structures that Grid significantly outperforms Flexbox.
Using Both Technologies Together
The best results are achieved when Flexbox and Grid are used together. Typically, Grid is applied to organize the overall skeleton of the page โ the large blocks โ while Flexbox handles the placement of small elements inside each block, such as the image, text, and button within a card. This approach logically separates layout into a "macro" and a "micro" level.
/* Page skeleton โ Grid */
.page {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Card interior โ Flexbox */
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
}In this example, the set of cards is arranged into three columns using Grid, while the elements inside each card are laid out vertically using Flexbox. This is exactly the technique used on most modern websites, and it keeps the code tidy and easy to extend. Separating responsibilities between the two systems makes development predictable and the codebase far easier to maintain over time.
Responsive Layout and the Difference from Older Methods
Responsive design โ adapting to different screen sizes โ is implemented very easily in both technologies. For Grid, a magic combination such as repeat(auto-fit, minmax(250px, 1fr)) automatically changes the number of columns depending on the screen width, without requiring a single media query. For Flexbox, the flex-wrap: wrap property moves elements onto a new line when there is not enough room for them.
When compared with the old float method, the advantage of these technologies becomes obvious. Float was originally created to wrap text around images, and using it for layout gave rise to numerous problems โ such as the collapse of container height (requiring a clearfix) and the near impossibility of vertical centering. Flexbox and Grid, however, were built specifically for layout, so vertical centering, equal columns, and flexible structures are solved with just a few lines of code. To sum up, in modern frontend work float is no longer used as a layout tool, and its place has been completely taken over by Flexbox and Grid.