Table of contents
The main function of CSS is to enable the users to style HTML elments.CSS helps in styling HTML using some specific values, such as padding, margins, color, background, and others.
In CSS, flexbox and CSS gridare both layouts that also specified values of properties. flexbox and CSS grid are perfect layouts used but for different purposes. probably, they are perfect layouts used in building a responsive webpage.
In this article, we will learn about flexbox and CSS grid layouts. we will also use code examples to show how they work, their differences, and their syntax. Then, we will learn what problems they are used to solve and when they are used on a website.
Outlines:
-
Background information
CSS pattern is simple, and, as we have discussed previously, it involves using values to properties of HTML elements.
consider the code below:
h1{
display:flex;
padding:30px;
margin:10px;
background-color:blue;
grid-template-columns:repeat(3,1fr)
}
This code display a CSS declaration that styles the h1 element of a website by using specific values to some properties of the element. we have seen some of the properties, such as display , and grid-template-column.
Differences
As we have discussed before flexbox is used to style one dimension, either a row or a column. also, flexbox has its properties, which am about to show you now.
And in fact, we see the working a little bit in the code below, and so Flexbox solves a couple of very common problems in CSS development such as vertical centering and also creating equal-height columns.
Modern CSS came and made things very easy and very simple to solve problems. so consider yourself lucky by that.
So basically what I mean is flexbox is perfect for replacing the old-school floats, By that it allows the writer to write fewer and also cleaner HTML NCSS codes which of course is very easy to maintain our websites over the long run and write fewer bucks.
So now, the element on which we want to use flexbox is called flex container. and all we have to do to create our flex container is to set its display property to flex, that's all.
So if we do this, then all the direct children of that flex container will become the so-called flex items. now, the direction in which these flex items are laid out is called the main axis.
Then the other perpendicular axis is simply called the cross axis, and it's important to know about these names because we can change the direction of the main access, and so therefore also of the cross axis.
But anyway, there are 3 other properties that we can apply to the flex container element which are flex-direction, flex-wrap, aligned content .
consider the properties in the code below:
h1{
display:flex;
flex-direction:row;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
CSS grid is used to style two-dimensional layout rows, and columns at the same time. and we will also see the properties as shown to you in flexbox.
let's look at the code below:
h2{
display:grid;
grid-template-rows:repeat(3,2fr);
grid-template-columns:repeat(3,1fr);
}
CSS grid was a set of CSS properties for building a 2-dimensional layout. And when the CSS grid was first developed years ago, the main reasons behind it were we can use it to divide two container elements into a row and columns that we could fill with its child elements.
So things like spending elements across multiple rows and columns overlap different elements and more. so we can use CSS grid in 2-dimensional contexts where it allows the browser to write a lot less than HTML and also easier to read CSS.
In this article, you will start appreciating these characteristics of CSS grid when you start using it and maybe comparing it to things like flexbox or even float layouts.
So as we just learned, already actually, the grid container is basically where everything happens and we create a grid container by setting its display to the property grid. Then all the child elements of the grid container will be the grid item.
Then, also like flexbox, we also have an axis here. so we have our row axis and the column axis.
So actually we have a lot of CSS grid properties, which I have shown you previously in this article. This article should be comfortable for you as a CSS beginner and therefore we are not going to overcomplicate things too much.
Alright, let's talk about grid items. There is a grid column and grid-row properties, which are very important to place grid items into a specific cell.
Then finally we have justify-self and align-self, hopefully, you can recognize this from flexbox.
So align-self is used to override align items a justify-self is used to override justified items for one individual grid cell.
Conclusion
As we have discussed so far in this article what grid and flexbox are used for, now you can make use of them without having any issues using them in your project. Remember that they are used in different places grid is used in building a two-dimensional layout either a row or a column and a flexbox is used when building a one-dimensional layout either a row or a column.