CSS (Cascading Style Sheets) is a language for creating styles and arranging files authored in various kinds of mark-up languages. This is frequently used with HTML to modify the look and feel of pages and interfaces that are presented on the web. In this tutorial, I will help you learn the differences between CSS Grid and Flexbox Layout.
CSS Grid Layout:
Another way of creating gride based layouts is through CSS Grid Layout that is a two-dimensional system that uses rows and columns. It is good for more intricate and organized designs. To make an element a grid container, you have to give it the display: grid property.
CSS Flexbox:
A one-dimensional layout system in CSS known as Flexbox enables the distribution of space between items inside a container and their alignment. This feature makes it suitable for use on various display devices that vary in size. For this reason, by applying flexbox, developers can create responsive web pages without resorting to using float and position properties many times in CSS. Developers should make all elements within this container become flex items by using the display: flex property to create a flex container.
How to set display in grid?
Make the parent element’s display into grid.
Determine the dimensions of the grid as either rows or columns using the grid-template property.
Add margin, padding, and row-gap, etc., to your child elements for better visibility of the grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Setting Display to Flex</title>
<style>
.fl{
display: flex;
flex-wrap: wrap;
}
.ex {
flex-direction:row;
flex: 1 0 100px;
margin: 5px;
padding: 10px;
background-color: #0000FF;
border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
}
</style>
</head>
<body>
<div class="fl">
<div class="ex">Content 1</div>
<div class="ex">Content 2</div>
<div class="ex">Content 3</div>
<div class="ex">Content 4</div>
<div class="ex">Content 5</div>
</div>
</body>
</html>
the columns are three equal in width and the gap property gives space between the items on the grid
How to Create a Flex Layout?
To create a flex layout, do the following.
Apply display: flex to the parent element.
Add margin and padding to child elements as desired for better aesthetics.
Specify when necessary, the flex direction.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setting Display to Grid</title>
<style>
.fl{
display: grid;
grid-template-columns: repeat(3, 1fr); /* This would display the children elements in three equal columns with equal width */
gap: 5px; /* To set a gap between thegrid items */
}
.gr {
padding: 20px;
background-color: #0000FF;
border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
}
</style>
</head>
<body>
<div class="gr">
<div class="gr">Content 1</div>
<div class="gr">Content 2</div>
<div class="gr">Content 3</div>
<div class="gr">Content 4</div>
<div class="gr">Content 5</div>
</div>
</body>
</html>
Distinctive Features of Grid and Flexbox
Grid and Flexbox are two powerful CSS tools that offer unique customization options for modern web design. Flexbox enables developers to create flexible layouts, while Grid provides the capability to design intricate and responsive structures that are easy to manage and maintain. Both tools grant a high level of control over a website's design, allowing for the rapid creation of unique and visually appealing layouts. Their growing popularity among developers is due to their ability to produce aesthetically pleasing and functional interfaces with ease. While Grid offers a straightforward column-based system for quick layout creation, Flexbox provides enhanced flexibility by allowing elements to be repositioned as needed. Understanding the distinctions between these two tools is crucial for maximizing their potential in front-end design.
Similarities between Flex and Grid:
• Both layouts are responsive: Whether you choose Flexbox or Grid for your application, both can adapt to various screen sizes if styled properly.
• Parent element layout setup: When using either Flexbox or Grid, the layout is applied by styling the parent element specifically with the chosen layout.
Conclusion
A useful tip when styling a webpage is to first decide on which display mode to use. Once that's determined, the rest of the page can be structured accordingly, keeping the overall design in mind. While this isn’t a strict recommendation, recent trends show developers favoring grid over flexbox. Regardless of your choice, be careful not to mix up the code for the different display methods to avoid potential errors.
Happy coding!
Top comments (0)