CSS Grid and Flexbox: two ways to arrange an interface

Useful to know

Arranging a page involves more than placing blocks one after the other. You need to decide how they share space, how they align, and what happens when the width changes. CSS offers different models for these tasks. In the documentation of MDN Grid, it is presented as a two-dimensional approach, and Flexbox as a model for one main direction. [1] This distinction is useful in choosing because it draws attention to the relationships between elements instead of to a random favorite technology.

Flexbox examines the main and transverse axis. The main direction can be a row or a column and is defined by the flex-direction; transverse is perpendicular to it. [2] Therefore, "one-dimensional" does not mean only horizontal. It means that the model decides the distribution in one direction at a time. For a group of buttons or a short navigation row, this is often a natural description of the task: the items must share the available space and align with their overall direction.

Grid is designed for relationships by rows and columns simultaneously. MDN emphasizes that it is part of the overall layout system and can work with other approaches. [1] In a catalog, for example, it may be necessary for the cards to follow a common column structure, and inside each card, the buttons to be arranged differently. This is not a conflict. The outer grid and inner group solve different spatial tasks and can use different tools.

In Flexbox, items can be transferred to new rows via flex-wrap. The alignment and distribution of free space are among the main possibilities of the model. [2] It is important, however, not to conclude that the appearance of a second line automatically turns it into the same model as Grid. To choose, we need to specify whether individual rows should share a common column logic, or whether each sequence can be arranged according to its own elements and available space.

Let's imagine a page with twelve cards and a strip of three filters. In maps, it can be essential that each column has a consistent width. With filters, it may be more important for the captions to get enough space and, if necessary, to go down. This is a design example that shows why the choice should follow the structure. If the visual rule is formulated first, setting CSS becomes more understandable from a series of trials with arbitrary values to a seemingly good result.

The check should include short and long texts, more elements and different widths. An arrangement can look good with sample captions and be broken with the actual content. It is useful to observe which attitude is lost: the columns, the distance, the alignment or the readability. Grid and Flexbox give different means of control, but none replace the clear idea of the interface. A working layout is one that retains the necessary links when the content and the screen change.