Scribd
Upload
11 views10 pages

Grid

CSS Grid is a two-dimensional layout system in CSS that simplifies the creation of complex web designs using rows and columns. Key features include defining grid sizes with grid-template-columns and grid-template-rows, managing gaps with grid-gap, and utilizing the fr unit for flexible space distribution. It also allows for precise positioning of items using grid lines and properties like grid-column and grid-row.

Uploaded by

jameel717772
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views10 pages

Grid

CSS Grid is a two-dimensional layout system in CSS that simplifies the creation of complex web designs using rows and columns. Key features include defining grid sizes with grid-template-columns and grid-template-rows, managing gaps with grid-gap, and utilizing the fr unit for flexible space distribution. It also allows for precise positioning of items using grid lines and properties like grid-column and grid-row.

Uploaded by

jameel717772
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS Grid (or CSS Grid Layout) is a powerful two-dimensional layout

system in CSS, designed to create complex web designs with rows and
columns. It allows you to design web layouts more easily and with greater
precision, as it handles both horizontal (row) and vertical (column)
placements simultaneously.

Display:
➔ We write display : grid
➔ This property is used to turn an element into a grid container

grid-template-columns and grid-template-rows: These properties define


the number and size of columns and rows in the grid.

grid-template-columns :
.grid-container { display: grid;
grid-template-columns: 100px 100px 100px;
}
grid-template-rows:
The grid-template-rows property in CSS Grid is used to define the size of
the rows in a grid container. Similar to grid-template-columns,

.grid-container {
display: grid;
grid-template-rows: 200px 200px 200px;
}
Grid Gap:
1. Single gap value for both rows and columns
If you want the same gap size between both rows and columns, you can
use just one value:

.container{
display: grid;
grid-gap: 30px;
}

2. Separate row-gap and column-gap values


You can also define separate gaps for rows and columns by specifying two
values. The first value is for the row gap, and the second is for the column
gap.
.grid-container {
display: grid;
row-gap: 15px;
column-gap: 30px
}

repeat()
The repeat() function in CSS is a powerful tool used within CSS Grid and
Flexbox to simplify the process of repeating a pattern of columns, rows, or
items. It's especially useful when you want to create a grid with multiple
identical columns or rows without writing repetitive CSS code.
.container{
display: grid;
grid-template-columns: repeat(3, 250px);
}

fr unit
The fr unit in CSS Grid is a flexible and powerful way to distribute space
within a grid container. The abbreviation fr stands for "fraction of
available space". It is used to allocate portions of the grid container's
space, making it perfect for responsive and fluid layouts.

How fr Works:
• The fr unit divides the available space into fractional units, meaning
that the total space left in the container (after accounting for fixed
sizes like pixels or other non-flexible units) is divided into fractions,
and griditems are assigned a certain number of these
fractions.
• 1fr represents 1 fraction of the available space. If multiple items are
assigned fr values, the space will be divided proportionally.

.container{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}

In this example:
• The first column takes 1fr of the available space.
• The second column takes 2fr, so it will be twice as wide as the first
column.
• The third column takes 1fr, equal to the first column.
. container { display: grid; grid-template-columns: 200px 1fr 2fr; /* First
column fixed at 200px, second and third flexible */ gap: 10px; }

Advantages of Using fr:


1. Flexibility: Unlike fixed units (like pixels), fr allows grid items to
resize according to the available space in the container.
2. Simplifies Layouts: You don’t have to calculate exact widths or
heights for each item. You can define proportions that adjust
dynamically.

3. Responsive: fr works well in responsive designs,


making it easy to create layouts that adapt to different
screen sizes.
grid lines
In CSS Grid Layout, grid lines are the lines that separate the rows and
columns in a grid container. They serve as the reference points for placing
grid items. These lines are numbered, and you can use the line numbers to
define where grid items start and end.
grid-column-start / grid-column-end :
Why Use a High Value like 4 for 3 Columns?
The key to understanding why you might use 4 as a value for grid-column-
end when you want an item to span across 3 columns lies in how grid lines
work:
• Grid lines: In a grid, there are lines that separate columns and rows.
For a grid with 3 columns, the grid lines are numbered as follows:
o Column 1 starts at line 1 and ends at line 2.
o Column 2 starts at line 2 and ends at line 3.
o Column 3 starts at line 3 and ends at line 4.
To span 3 columns, you need to set the grid-column-end to line 4. This is
because the last grid line (at the end of the third column) is line 4, so this
is where the item will end.

.items-1{
grid-column-start: 1;
grid-column-end: 3;
}
grid-row-start / grid-row-end :
.items-2{
grid-column-start: 2 ;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
grid-column
Use the grid-column property to specify where to place an item.

.items-1{
grid-column: 1/4;
}
grid-row
Use the grid-row property to specify where to place an item.

.items-1{
grid-row: 1/4;
}

You might also like