Grid Container
1
2
3
4
5
6
7
8
Grid Container
To turn an HTML element into a grid container, you need to change the display property to either grid or inline-grid.
Grid containers are made up of grid items that are put into columns and rows.
The grid-template-columns Property
The grid-template-columns property determines how many columns your grid layout has, and it can also specify the width of each column.
The value is a list of words separated by spaces. Each word in the list tells us how wide a column should be
If you want your grid design to have 4 columns, you can set the width of these columns individually, or simply use auto if you want all columns to be the same width.
Important: If you have more than 4 items in a grid with 4 columns, the grid will automatically create a new row to accommodate the extra items.
You can use the grid-template-columns property to set the width of columns in a grid.
The grid-template-rows Property
The grid-template-rows property sets how tall each row is in a grid.
1
2
3
4
5
6
7
8
The value is a list of words separated by spaces. Each word in the list tells us how tall a row should be.
The justify-content Property
The justify-content property is employed to position the entire grid within the container, maintaining its width and height as specified.
1
2
3
4
5
6
The align-content Property
The align-content property helps position the entire grid vertically within its container.
1
2
3
4
5
6
Important: The combined height of the grid must be smaller than the container's height for the align-content property to work.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The grid-template-columns Property</h1>
<p>You can use the <em>grid-template-columns</em> property to specify the number of columns in your grid layout. </p>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 30px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The grid-template-columns Property</h1>
<p>Use the grid-template-columns property to decide how wide each column should be.</p>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The grid-template-rows Property</h1>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<p>Use the <em>grid-template-rows</em> property to specify the size (height) of each row. </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px;
/*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>Utilize the <em>justify-content</em> attribute to line up the grid within the container. </p>
<p>The "space-evenly" value makes sure all columns have the same amount of space between them and around them.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px;
/*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>Use the <em>justify-content</em> rule to position the grid within the container. </p>
<p>The setting "space-around" will evenly distribute space around the columns.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-between;
grid-template-columns: 50px 50px 50px;
/*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>Use the "justify-content" style to position the grid within the box.</p>
<p>The "space-between" value makes sure each column has the same space between them.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: center;
grid-template-columns: 50px 50px 50px;
/*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>Use the <em>justify-content</em> rule to line up the grid inside the box. </p>
<p>The word "center" makes the grid line up in the middle of the box.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px;
/*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>Use the <em>justify-content</em> property to arrange the grid within the box. </p>
<p>The word "start" will make sure the grid is positioned at the beginning of its container.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px;
/*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>Utilize the <em>justify-content</em> property to line up the grid within the container. </p>
<p>The word "end" will make the grid line up at the container's end.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: center;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>Use the <em>align-content</em> property to vertically align the grid inside the container. </p>
<p>The value "center" will align the rows in the middle of the container:</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>Use the <em>align-content</em> attribute to vertically align the grid within the container. </p>
<p>The setting "space-evenly" makes sure that the rows have the same amount of space between them and around them.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>Apply the <em>align-content</em> property to make sure the grid lines up vertically within the container. </p>
<p>The value "space-around" will give the rows equal amount of space around them:</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>Utilize the <em>align-content</em> attribute to vertically position the grid within the container. </p>
<p>The term "space-between" evenly distributes space between rows.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: start;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>Apply the <em>align-content</em> property to vertically center the grid within the container. </p>
<p>The 'start' value makes sure that the rows are aligned to the beginning of the container.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: end;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>Use the <em>align-content</em> property to line up the grid vertically within its container. </p>
<p>The word "end" will make sure the rows are lined up at the bottom of the container.</p>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
HTML
CSS
Javascript
Jquery