Hello, My name is Nima Owji. I'm a 15-year-old developer. Today, I want to talk about "Grid Layout" in CSS. What is it? In fact, you can create many cool designs in a minute using this layout! So let's start! How to use "Grid Layout"? To use grid layout, you need a "div" tag. You can also use any other container tag like "main", "aside"... After that, you need to assign a class or an ID to this tag because we want to modify it using CSS (You can use inline-CSS too). In the CSS file, after selecting the element, we need to make it a "grid"! For that, we can simply set "display" to "grid"! { : grid;
} .grid display We have a grid now! How to assign the number of rows and columns? After that, we need to set the number of rows and columns for our grid. We have a number of CSS properties to do that! For example, we want to create a grid with 3 rows and 4 columns. { : grid; : ; : ;
} .grid display grid-template-columns 50px 50px 50px 50px grid-template-rows 50px 50px 50px In this case, we have 4 columns and 3 rows, but as you can see all of them are 50px and we have some redundancy here! If you want to use different sizes for each column/row, you should write those sizes to make it happen, like what I have done, I've written "50px" four times, in order to make a grid with 4 columns and 50px for each column! But if you want to repeat the same size for all of your columns/rows, you can use "repeat" which is in the CSS! Like this: { : grid; : (4, 50px); : (3, 50px);
} .grid display grid-template-columns repeat grid-template-rows repeat Units As you can see, we used "px" as our unit of the columns/rows, but what if we wanted to make it responsive?! We may want to share the available space with columns/rows. What should we do? Grids have a special unit for this purpose! That is "fr". You can use "fr" to share the available space automatically. For example, if you want to create a grid with two columns and each column uses half of the available width, you should do something like this: { : grid; : (2, 1fr); : (3, 50px);
} .grid display grid-template-columns repeat grid-template-rows repeat You can also use ratios, like this: grid-template-columns: r r; 2f 1f Gap Grids have another cool property called "gap"! If you want to have a space between each cell, you can use "gap". That's really cool in some designs! It can be really useful like "margin" and "padding"! Example: { : grid; : (2, 1fr); : (3, 50px); : ;
} .grid display grid-template-columns repeat grid-template-rows repeat gap 14px You can almost use all of those units like "px", "cm", "rem", ... for the gap. How to put our elements in this grid? You can simply put all of your elements in this "div" and it will automatically become a grid! I hope you liked it! That was all! I hope you liked this article! Don't forget to share it on social media like Twitter and mention me too! Also, don't forget to follow me on Twitter ( )! If you had any questions, don't hesitate to ask me, I will respond if I could! Thanks a lot! Click here

Twitter

a Full-Stack web developer using asp.net. C#, js, win forms

2021 - HackerNoon Contributor of the Year - CSS

2022 - HackerNoon Contributor of the Year - Instagram

2022 - HackerNoon Contributor of the Year - News

2022 - HackerNoon Contributor of the Year - Product Hunt

Follow me on Twitter!

2021 - HackerNoon Contributor of the Year - HTML

Nominated for 2022 - HackerNoon Contributor of the Year - Product Hunt

Nominated for 2022 - HackerNoon Contributor of the Year - News

Nominated for 2022 - HackerNoon Contributor of the Year - Instagram

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

CSS Grid Layout: How It Works

CSS Grid Layout: How It Works

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Nima Owji

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

CSS Grid Layout: How It Works

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Nima Owji

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES