What is CSS Grid?

CSS Grid is a two-dimensional layout that you can use for creating responsive items on the web.
The Grid items are arranged in columns, and you can easily position rows without having to
mess around with the HTML code.CSS Grid is a powerful tool that allows for two-dimensional
layouts for columns and rows to be created on the web.

Features of CSS Grid Layout

Flexible Track Sizes
You can use the fr unit (Fraction Unit) to assign any specified pixel value to the grid. This will
make your grid organized and responsive.

Item Placement
CSS grid has made it much easier to position items in the container in any area you want them to
be without having to mess with the HTML markup.

Alignment Controls
The alignment of an element/item in a container is easier than ever before with CSS Grid. In the
container, you can now arrange elements/items horizontally and vertically as you wish.

Benefits of CSS Grid

CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts.
CSS Grid also easy to use and is supported by most web browsers. The CSS grid makes your
mark-up cleaner (in your HTML code) and gives you a lot more flexibility. This is partly
because you don’t have to change the mark-up (HTML code) to change the position of an item
using the CSS grid. All in all, CSS Grid Layout helps us build a more complex layout using both
columns and rows.

When Should You Use CSS Grid

Although you can use CSS Grid in practically any aspect of web development, there are certain
situations when it's ideal.
For example, when we have a complex design layout to implement, CSS Grid is better than the
CSS float property. This is because Grid is a two-dimensional layout (with columns and rows),
whereas the CSS float property is a one-dimensional layout (with columns or rows).Grid is also a
good choice when we need a space or gap between elements. By using the CSS
grid gap property, the spacing of two elements is much easier than using the
CSS margin and padding properties which might end up complicating things.

CSS Grid Properties

The CSS grid layout consists of many grid properties. Now we'll take a look at some of them so
we can learn how to use them.

Grid container property

This is a CSS grid property that houses the grid items/elements. We implement the CSS grid
container property by setting the container to a display property of grid or in-line grid.
For Example:
display: grid;
or

display: in-line grid;

Grid-template-column property
This is a property used to set each column’s width. It can also define how many columns you
want to set to your project.You can implement the CSS gird column property using grid-
template-column.
For Example: grid-template-column: 100px auto 100px;

The code above shows that we have three columns. The width of columns one (the first column)
and three (the third column) are set to 100px. The width of column two (the middle column) is
set to auto. This means that as the size of your screen increases, columns one and three
take 100px of the screen width, while column two takes the remaining width of the screen
(which is auto).

Grid-template-row property
You use the CSS row property to set the height of each column. You can also use it to define
how many rows you want to set in your project. You can implement the CSS gird row property
using grid-template-row, like this:

grid-template-row: 50px 50px;

The code above shows that we have a total of two rows and those two rows are 50px high.
Note that we can also assign the column and row property to our HTML code at once by simply
using gird-template. Grid-template is another way of representing the grid-template
column and grid-template-row.

For example:
grid-template: 50px 50px / 100px auto 100px;
The code above will give you the same result as grid-template-column and grid-template-row.
To use the grid-template property, you will have to assign the value to the row first before
assigning the column's value, just like the code above. The 50px 50px is for the row while 100px
auto 100px is for the column.

A way to remember this is by thinking of the letter L:

A gird with a column of 100px auto 100px and row of 50px 50px

Column-gap property
As the name states, it is a grid property that assigns a space between two or more columns in a
container. You can do this by using the column-gap property and giving it a value. For example:
column-gap: 20px; From the code above, you can see that a gap of 20px was assigned to the
column.
<html>
 <head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 30px;
grid-row-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>

20px column-gap

Row-gap property
 Just like column-gap, row-gap is a CSS property that assigns a space between two or more rows
in a container. For example:

row-gap: 50px;

Note that we can also assign a gap to both the columns and rows of a container by using
the gap property. For this to work, we only assign one value to both the columns and the rows of
the container, just like we did in the code above.
Here's an example:
gap: 20px;

From the diagram above, we can see that a gap of 20px was set to both the columns and rows of
the container making them equally spaced.

Justify-content property
This is a grid property that you use in positioning items (columns and rows) horizontally in a
container. It displays how the web browser positions the spaces around the items (columns and
rows).
The justify-content property has six possible values:
 Start
 end
 center
 space-around
 space-between
 space-evenly

Start
This positions the items at the left side of the browser and can be executed with the following
code:
justify-content: start;

End
This positions the items at the right side of the browser and can be executed with the following
code:
justify-content: end;

Center
This positions the items at the center of the browser and can be executed with the following
code:
justify-content: center;
Space-around
This property distributes the items in the container evenly, where each item in the container has
an equal amount of space from the next container.
This code can be executed like this:
justify-content: space-around;

Space-between
Just like the space-around property, space-between distributes the items in the container evenly,
where each item in the container has an equal amount of space from the next one in the
container. It takes up the entire width of the container.
This code can be executed like this:
justify-content: space-between;

Space-evenly
Just as the name states, this property distributes the items in the container evenly, where each
item in the container has an equal amount of space from the next one in the container.

This code can be executed like this:

justify-content: space-evenly;

Note that all the justify-content properties position their items/elements horizontally. Try doing it
yourself to understand it more.

Align-content property
Align-content is the opposite of justify-content. You use the align-content property in positioning
items vertically in a container.
Just like justify-content, the align-content property has six possible values:
 Start
 end
 center
 space-around
 space-between
 space-evenly
Start
This positions the items at the top of the browser and can be executed with the following code:
align-content: start;

End
This positions the items at the bottom of the browser and can be executed with the following
code:
align-content: end;
Center
This positions the items at the center of the browser and can be executed with the following
code:
align-content: center;

Space-around
This property distributes the items along the side of the container evenly, where each item in the
container has an equal amount of space from the next one vertically.
This code can be executed like this:
align-content: space-around;

Space-between
Just like the space-around property, Space-between distributes the items in the container evenly,
where each item in the container has an equal amount of space from the next one in the
container, and takes up the entire width of the container in the vertical direction.
This code can be executed like this:
align-content: space-between;

Space-evenly
Just as the name states, this property distributes the items in the container evenly, where each
item in the container has an equal amount of space from the next one vertically.
This code can be executed like this:
align-content: space-evenly;

The basic terms associated with CSS Grid are as follows:

1. Columns
2. Rows
3. Cells
4. Grid Lines
5. Gutter
Example 3x2 column grid

As you can see, there is a header and a footer. Then the center row has 3 columns with nav in the
first column sidebar on the right, and the main content area in the center (which occupies most of
the row).
Html code
<html>
<body>
<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div>
</body>
</html>

Css rule
<html>
<body>
<style>
.wrapper * {
background: orange;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
margin-right: 1px;
}
</style>
<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div>
</body>
</html>
Result
1FR = 1/3rd or 33.333% of the available space and width of the grid
container (1200px)
<html>
<body>
<style>
.wrapper * {
background: orange;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
margin-right: 1px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr 2fr;
grid-template-rows: 5fr 20fr 5fr;
grid-gap: 10px;
height: 720px;
}
</style>
<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div>
</body>
</html>

Result
<html>
<body>
<style>
.wrapper * {
background: orange;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
margin-right: 1px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr 2fr;
grid-template-rows: 5fr 20fr 5fr;
grid-gap: 10px;
height: 720px;
}
</style>
<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div>
</body>
</html>
Result
<html>
<body>
<style>
.wrapper * {
background: orange;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
margin-right: 1px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr 2fr;
grid-template-rows: 5fr 20fr 5fr;
grid-gap: 10px;
height: 720px;
}

header {
grid-column-start: 1;
grid-column-end: 4;
}

footer {
grid-column-start: 1;
grid-column-end: 4;
}
</style>
<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div>
</body>
</html>
Final code
<html><head> <title>CSS Grid</title>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr 2fr;
grid-template-rows: 5fr 20fr 5fr;
grid-gap: 10px;
height: 720px;
}
header {
grid-column-start: 1;
grid-column-end: 4;
}
footer {
grid-column-start: 1;
grid-column-end: 4;
}
.wrapper * {
background: orange;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
margin-right: 1px;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div></body></html>
Image grid
<!DOCTYPE html>
<html>
<body>
<style>

.btn {
border: none;
color: white;
cursor: pointer;
}

.success {background-color: #04AA6D;} /* Green */

.success:hover {background-color: #46a049;}
/* button */

*{
box-sizing: border-box;
}

body{
margin: 0;
font-family: Arial;
}

.header {
text-align: center;
padding: 32px;
}

.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}

/* Create four equal columns that sits next to each other */

.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each
other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}

body {
margin: 40px;
}

.wrapper {
display: grid;
grid-template-columns: 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}

.box {
background-color: #BF6FF4;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
/* buuton
<h3 class="mb-0 font-weight-semibold">$250.99</h3>
<button type="button" class=""><i class=""></i> Add to cart</button>
*\
/*
photo gride css
*\

</style>
<div class="wrapper">

<div class="box a"><!-- Photo Grid -->

<div class="header">
</div>
<div class="row">
<div class="column">
<img src="img/a2.gif" style="width:100px">
</div>

<h3 class="">$250.99</h3>
<button type="button" class="btn success"><i class=""></i> Add to cart</button>
</div>
</div>

</div>
</body>
</html>