In this write up we would be trying to understand what flex and grids are, as well as streamlining their similarities and differences summarily. Both of them are layouts used in building webpages, first, we take a look at flex or flexbox as it is called.
Flexbox is a one-dimensional layout system that may be used to design a row or column axis layout. It is useful for assigning and aligning space among elements in a grid-based container. It is compatible with a wide range of display devices and screen sizes. Assume we have a container with the class name container and the following five child items:
<body>
<div class="container">
<div class="child">box 1</div>
<div class="child">box 2</div>
<div class="child">box 3</div>
<div class="child">box 4</div>
<div class="child">box 5</div>
</div>
</body>
We would have the corresponding CSS file as given below:
.container{
width: 500px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.child{
flex: 1 1 150px;
}
The "'display: flex'" parameter is used to construct a flex container. Then, any element contained within that flex container becomes a flex item. In our flex container, we may opt to give the items in our container a direction, 'row and column' are the most commonly utilized flex directions. 'Flex-direction' could be adjusted to 'row-reverse or column-reverse' in some circumstances. Another intriguing feature is "flex-wrap," which allows things in a flex container to transfer to the next line when there is no more space. Flexbox allows you to work on either element (row or column) with greater freedom. In this case, HTML markup and CSS will be simple to manage. Other Flexbox properties include align-self and justify-content.
CSS grids are a two-dimensional layout system that allows us to deal with rows and columns together, which opens up a wide range of possibilities for creating a more complicated and organized design system. Grid allows you to move around the blocks more freely, regardless of your HTML syntax. Grid layout is intended for larger-scale layouts that are not linear.
<body>
<div class="container">
<div class="child">box 1</div>
<div class="child">box 2</div>
<div class="child">box 3</div>
<div class="child">box 4</div>
<div class="child">box 5</div>
</div>
</body>
To define a grid container, simply add a "display: grid" property to your block element. You now have a grid, so decide how many rows and columns you want. We utilize the 'grid-template-rows and 'grid-template-columns attributes to build rows and columns, and we pass values that define how far our grid items will spread through the container:
.container{
display: grid;
grid-template-columns: 80px 80px;
grid-template-rows: auto;
}
.child{
justify-self: end;
}
It is worth noting that justify-self is not the grid's only alignment attribute. In addition, we may utilize justify-content, justify-items, align-items, and align-self.
CSS Grids aid in the creation of the web page's outer layout. This allows you to create both sophisticated and responsive designs. This is why it is referred to as layout first. Flexbox is generally used to align content and move blocks. CSS grids are for 2D layouts. It is applicable to both rows and columns. Flexbox works best in a single dimension (either rows or columns).
Top comments (0)