CSS Grid Properties - Gap, Grid Column Gap, Grid Template Columns
Here are the CSS grid properties which is necessary to build a beautiful UI using grid faster -
-
gap: 1rem;
: This property is a shorthand for setting bothgrid-row-gap
andgrid-column-gap
to the same value. It defines the size of the gap between grid items, both horizontally and vertically. In this case, the gap is set to1rem
. -
grid-column-gap
andgrid-row-gap:
These properties set the size of the gap between columns (grid-column-gap
) and rows (grid-row-gap
) in the grid. If you’ve used gap:1rem;
, then both of these properties are implicitly set to the specified value (1rem
in this case). -
grid-template-columns: 1fr 2fr 1fr;
: This property defines the number and size of columns in the grid. In this example, there are three columns. The1fr
and2fr
are fractional units. fr stands for fraction, and it’s a unit that represents a fraction of the available space. In this case, the first and third columns are set to occupy 1 part each, and the second column is set to occupy 2 parts. So, if the total available space is, for example, 300 pixels, the first and third columns would each take up 100 pixels, and the second column would take up 200 pixels. -
grid-template-rows:
This property works similarly togrid-template-columns
but for rows. It defines the number and size of rows in the grid. If you don’t explicitly set it, it will automatically create rows based on the content. If you want to set specific sizes for rows, you can use thefr
unit or other units like pixels.
Here’s an example:
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 2fr 1fr;
}
.grid-item {
background-color: lightblue;
border: 1px solid darkblue;
padding: 20px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
In this example, the grid has three columns with the specified fractional sizes, and three rows with specific sizes in pixels. The grid items are divs with content from 1 to 6, and they will be placed in the grid according to the specified column and row sizes.
CSS
All Tutorials in this playlist
Popular Tutorials
Categories
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
8
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
Computer Engineering
3
-
CSS
28
-
Design Pattern in PHP
2
-
Design Patterns - Clean Code
1
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
12
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
8
-
Python
2
-
React Js
19
-
React Native
1
-
Redux
2
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Bash Scripting
- Business
- C
- C-sharp programming
- C++
- Code Editor
- Computer Engineering
- CSS
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development