Let’s learn about a new system for creating two-dimensional structures in CSS called CSS Grid, compare it to Flexbox and learn how to customize amazing architecture.
In this article, we will learn more about the dynamic architecture of the web to create amazing and beautiful architecture on the web — we will learn about the CSS Grid.
We will understand why these technologies were created and what they really are, what problems it helps us to solve, their similarity to Flexbox, and how it works in modern browsers to allow us to build powerful structures without adding much. for additional CSS code.
If you are not new to web development, you may recall a time when we did not have a lot of technology or tools to create structures in CSS and HTML, when customers asked for some advanced features but we could not. to do it.
Sometimes it was not a very advanced feature, but the web and technology it provided at the time was not very good and, of course, was not the right technology for the job.
Most of the time when we try to create advanced structures using CSS, we end up with a black and large code in our app, with lots of divs, spans, classes, etc. At the time, we did not have Flexbox to help us place the elements on the page the way we wanted, and we did not have many of the semantic features offered by HTML5 today, such as side, header, nav, etc.
The web has undergone a major, dramatic, and dramatic change over the years, gaining more and more technical support, and the browsers have also evolved to fit most of the web APIs we have these days.
It made life easier for all Internet users — every user today is able to navigate from any website to any device, without experiencing any kind of problems. Today, we are able to create amazing structures and websites, able to create amazing things that were unthinkable even in the years to come.
Related:Top 15 IDE Best Web Development in 2022
In this article, we will learn more about the most exciting and powerful architectural system we have today to build structures on the web using the CSS: CSS Grid.
First, let’s go over and update Flexbox a bit, which will give us the architectural foundation on the web. Then we will learn why CSS Grid is such a powerful technology and how we can begin to use it today to build the most advanced buildings in the world.
Return to Flexbox
An exciting and innovative way to build beautiful buildings on the web was introduced a few years ago, the first draft was published on July 23, 2009. Called Flexbox, it helps us build the most efficient and beautiful buildings by allowing us to organize, organize and edit things on the page. It has become much easier to build websites using Flexbox because, with it, all we must do to start using it is to pass a display: flex to an element of the page, and this thing becomes a container.
When you pass a display: flex to an element, that part will now become a container, which means it will align things horizontally automatically. You can change it to align things upwards if you want; all you must do is pass flex direction: column.
Flexbox is a great and accurate way to build beautiful structures on the web. If you do not know yet how to use it properly, I would really recommend you to read the MDN documentation of the basic Flexbox concepts. Then even if you move to the CSS Grid, you can have a solid foundation for web layouts on the web, making it easy to read the CSS Grid.
But, what exactly is the deal with Flexbox? How is Flexbox different from CSS Grid?
The main difference between Flexbox and CSS Grid is: Flexbox is a one-dimensional layout, while the CSS Grid is a two-dimensional grid.
While using Flexbox, you will have the size of your object defined within the object itself, in the CSS Grid you will define it in the grid container. Another difference between them is that in Flexbox you will have a column or line limit, while using CSS Grid you will not have this problem because you will set the correct number of columns or rows you want.
They have many variations, but they are not very different when it comes to creating structures – you can achieve the same goal using both, but with different uses. While using the CSS Grid, you can also often end up using Flexbox within your CSS, and vice versa, but CSS Grid is a very powerful way to create beautiful and advanced layouts because it is a two-dimensional layout system. That means we can have as many columns or rows as we want, without having to mess things up or have to create too many media queries, etc.
Now that we know the most important differences between Flexbox and CSS Grid, let’s start learning more about CSS Grid and understand why this system structure is dynamic and renamed.
CSS grid
When we use Flexbox, we have a one-sided layout system — which means we can’t create custom lines or columns for example. The beauty of the CSS Grid is that it is a two-dimensional structure system, which means we can create as many columns or rows as we want, and be able to have different layouts if we like. Now, let’s understand the basics of the CSS Grid and its layouts, and see how things work in this new layout.
display: grid
The first and most important thing to understand is that if we want to use the CSS Grid on our page or somewhere, all you need to do is pass display: grid to that element:
display: grid;
By transferring the display: grid to our feature, we define that component as a new grid container. We can also pass display: inline-grid to create a new grid. After you move it, you can now create columns or rows within the object.
Grid Columns and Grid Rows
After converting your element into a new grid container, you will need to specify how many columns and rows you want. First, to create columns in the CSS grid, we use the following syntax:
grid-template-columns: 200px 200px;
In the top row, we created two columns of the same size. Now, to create lines, as you can guess, is almost the same:
grid-template-rows: 300px 300px;
In the top row, we created two lines of the same size. The good thing here is that you can go through a lot of numbers and units within it, and you can mix them up again. Suppose we want to create 3 rows, one with 25%, one with 400px, and the last with 1fr (new CSS unit):
grid-template-rows: 25% 400px 1fr;
Another great feature we can use while creating rows or columns is the CSS repetition function. This function can be used to represent a duplicate of a list of tracks, which means we can duplicate as many columns or rows as we want without having to write too many codes.
Related: Best CSS Frameworks for web developers
Suppose we want a grid object with 12 columns — how can we do that? We can use the CSS repetition function, as follows:
grid-template-columns: repeat(12, 50px);
Now our feature has become a grid! Now that we know the basics about the CSS grid, let’s create a simple page using the CSS Grid to see the power behind it.
First, let’s create the following HTML structure:
<div className="firstGrid"> <div className="one" /> <div className="two" /> <div className="three" /> </div>
Now, let’s give the style the firstGrid. This element will have the following style:
width: 600px; height: 300px; align-self: center; justify-self: center; justify-content: center; align-items: center; background: red; border-radius: 6px;
As you can see, this element is not a grid container, yet. Let’s turn this element into a grid container, and this object will have three columns of the same size each, and only one row. Here’s how we can do that:
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr;
Now, our element is a grid container, consisting of three columns of the same size and one line. Now, let’s give some CSS for kids dividers within the firstGrid object.
.one,
.two,
.three {
width: 200px;
height: 200px;
border-radius: 6px;
}
.one {
background: yellow;
}
.two {
background: purple;
}
.three {
background: chartreuse;
}Now, you should have an element with three children ‘divs inside it, with three columns of the same size each, and only one row. When you open Developer Tools and go to Explore Elements, you can see what’s going on inside the object, how many rows or columns, etc.
But you may be wondering now: “How can I set the features the way I want, without following the HTML order?” For example, if we want to put three div in the first column, how can we do that?
When using the CSS Grid, if you want to place the elements in a certain order, you can use the grid-column-start and grid column-end to the grid column to place the element in a particular column, and the grid-row-start and grid-row-end to be set to a specific line.
For example, if we wanted to place three div in the first column, all we have to do is go to div three CSS, and then enter the following code:
.three {
grid-row-start: 1;
grid-row-end: 2;
background: chartreuse;
}We can put elements in a building any way we want. This is a powerful architectural plan and opens up many opportunities for new designs.
Another amazing feature we have in the CSS Grid is the column and line gap. If we want to have less space between rows or columns, we can use the grid-column-gap or grid-row-gap.
grid-column-gap: 15px;
This is just a guide and introduction to CSS Grid. You will learn a lot about using it every day and create other types of structures. Currently, CSS Grid is a powerful web application. Browsers have been supporting it for a long time, and many companies and developers are starting to use it in their projects instead of Flexbox.
As I mentioned earlier, most of the time when you use CSS Grid you will end up using a certain Flexbox in your code. That’s pretty cool and a smart move, because if you use the CSS Grid you’ll need to do some of the things you used to do with Flexbox.
Conclusion
In this article, we learned about the CSS grid and its power to create beautiful and vibrant layouts on the web these days, and how we can benefit from using it in our programs as almost all browsers are supported by the CSS Grid.
We also learned a little about Flexbox and the difference between Flexbox and CSS Grid. You can start building many different layouts right now using CSS Grid, but that doesn’t mean you should stop using Flexbox, because most of the time while using CSS Grid, you’ll need some features from Flexbox to the center. or align the elements.