Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
Grid allows elements to be organised in two dimensions (row and column). If a container's display is set to grid, then that container becomes a grid and all elements that are contained in that container will have the grid CSS applied to them.
To make a containter become a grid use the display: grid CSS.
A grid's layout can be set using grid-template-columns and grid-template-rows. Grid size values are space-separated. Grid size value can be a length, a percentage (%), or a fraction (using the fr unit). The fr unit allows us to set the size as a fraction of the space that is not being allocated to non-flexible items. In the example below, the total amount of space available to the fr units does not include the 50% of the width that is allocated to the first column or the 100px that is allocated to the first row.
Example showing display: grid, grid-template-columns and grid-template-rows (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: 50% 1fr 4fr;
grid-template-rows: 100px 1fr;
width: 100%;
height: 500px;
border: thin solid #cccccc;
}
#container div
{
border: thin solid red;
background-color: #ffffaa;
}
</style>
</head>
<body>
<p>grid-template-columns: 50% 1fr 4fr</br>grid-template-rows: 100px 1fr</p>
<div id="container">
<div>Row One, Column One</div>
<div>Row One, Column Two</div>
<div>Row One, Column Three</div>
<div>Row Two, Column One</div>
<div>Row Two, Column Two</div>
<div>Row Two, Column Three</div>
</div>
</body>
</html>
If we set the size to min-content, then the size will be as small as is possible to hold its content.
Example showing min-content (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: min-content 1fr 1fr;
grid-template-rows: min-content 1fr;
width: 500px;
height: 500px;
border: thin solid #cccccc;
}
#container div
{
border: thin solid red;
background-color: #ffffaa;
}
</style>
</head>
<body>
<p>grid-template-columns: min-content 1fr 1fr;<br>grid-template-rows: min-content 1fr;</p>
<div id="container">
<div>Min Content Row One, Min Content Column One</div>
<div>Row One, Column Two</div>
<div>Row One, Column Three</div>
<div>Row Two, Min Content Column One</div>
<div>Row Two, Column Two</div>
<div>Row Two, Column Three</div>
</div>
</body>
</html>
Place an image in the first grid item and watch how this affects the grid.
If we set the size to max-content, then the size will be large enough to hold its entire content. It will attempt to keep as much of the content from wrapping.
Example showing min-content (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: max-content 1fr 1fr;
grid-template-rows: max-content 1fr;
width: 500px;
height: 500px;
border: thin solid #cccccc;
}
#container div
{
border: thin solid red;
background-color: #ffffaa;
}
</style>
</head>
<body>
<p>grid-template-columns: <b>max-content</b> 1fr 1fr;<br>grid-template-rows: <b>max-content</b> 1fr;</p>
<div id="container">
<div>Max Content Row One, Max Content Column One</div>
<div>Row One, Column Two</div>
<div>Row One, Column Three</div>
<div>Row Two, Max Content Column One</div>
<div>Row Two, Column Two</div>
<div>Row Two, Column Three</div>
</div>
</body>
</html>
Place an image in the first grid item and watch how this affects the grid.
Place text and an image in the first grid item. Set its row height to min-content. Compare how this grid item is displayed when and column width is set to min-content and max-content.
The minmax() function defines a size range between min and max.
Example showing the minmax() function (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: minmax(min-content, 20%) 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
height: 500px;
border: thin solid #cccccc;
}
#container div
{
border: thin solid red;
background-color: #ffffaa;
}
</style>
</head>
<body>
<p>grid-template-columns: <b>minmax(min-content, 20%)</b> 1fr 1fr;<br>grid-template-rows: 1fr 1fr;</p>
<div id="container">
<div>The minmax() function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min-content</div>
<div>Row One, Column Two</div>
<div>Row One, Column Three</div>
<div>Row Two, Max Content Column One</div>
<div>Row Two, Column Two</div>
<div>Row Two, Column Three</div>
</div>
</body>
</html>
Place an image in the first grid item and watch how the grid resizes.
The repeat() function allows us to repeat a column layout two or more times. In the example below, we use repeat to create three columns.
Example showing the repeat() function (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: repeat(3, minmax(min-content, 1fr));
grid-template-rows: 100px 1fr;
width: 100%;
height: 500px;
border: thin solid #cccccc;
}
#container div
{
border: thin solid red;
background-color: #ffffaa;
}
</style>
</head>
<body>
<p>grid-template-columns: <b>repeat(3, minmax(min-content, 1fr))</b>;<br>grid-template-rows: 100px 1fr;</p>
<div id="container">
<div>Row One, Column One</div>
<div>Row One, Column Two</div>
<div>Row One, Column Three</div>
<div>Row Two, Column One</div>
<div>Row Two, Column Two</div>
<div>Row Two, Column Three</div>
</div>
</body>
</html>
If we specify less grid-template-rows values than there are rows, then the set of grid-template-rows values will be applied repeatedly to the additional rows. In the example below, we have 18 rows and three grid-template-rows values (50px 100px 200px).
Example of a repeating row pattern (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 30px 100px 200px; /* repeat this pattern when setting row heights */
border: thin solid #cccccc;
}
#container div
{
border: thin solid red;
background-color: #ffffaa;
}
</style>
</head>
<body>
<p>grid-template-columns: 1fr 1fr 1fr;<br><b>grid-auto-rows</b>: 30px 100px 200px; </p>
<div id="container">
<div>Row One, Column One</div>
<div>Row One, Column Two</div>
<div>Row One, Column Three</div>
<div>Row Two, Column One</div>
<div>Row Two, Column Two</div>
<div>Row Two, Column Three</div>
<div>Row Three, Column One</div>
<div>Row Three, Column Two</div>
<div>Row Three, Column Three</div>
<div>Row Four, Column One</div>
<div>Row Four, Column Two</div>
<div>Row Four, Column Three</div>
<div>Row Five, Column One</div>
<div>Row Five, Column Two</div>
<div>Row Five, Column Three</div>
<div>Row Six, Column One</div>
<div>Row Six, Column Two</div>
<div>Row Six, Column Three</div>
<div>Row Seven, Column One</div>
<div>Row Seven, Column Two</div>
<div>Row Seven, Column Three</div>
<div>Row Eight, Column One</div>
<div>Row Eight, Column Two</div>
<div>Row Eight, Column Three</div>
<div>Row Nine, Column One</div>
<div>Row Nine, Column Two</div>
<div>Row Nine, Column Three</div>
</div>
</body>
</html>
Gaps can be placed between grid items using column-gap, row-gap, grid-column-gap and grid-row-gap. As seen in the example below, gaps are only created between items. Gaps are not created between items and the grid container's edge.
Example showing grid layout with gaps (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: 20% 1fr 20%;
grid-template-rows: 100px 1fr;
column-gap: 5px;
row-gap: 20px;
width: 500px;
height: 500px;
}
#container div
{
border: thin solid red;
background-color: #ffffaa;
}
</style>
</head>
<body>
<div id="container">
<div>Row One, Column One</div>
<div>Row One, Column Two</div>
<div>Row One, Column Three</div>
<div>Row Two, Column One</div>
<div>Row Two, Column Two</div>
<div>Row Two, Column Three</div>
</div>
</body>
</html>
Adjust the code above to include a gap of 20px between the edge of the grid container and the grid items, as shown here.
A grid's layout can be set by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell.
Example showing grid-template-areas responsive webpage layout where the grid changes shape when the screen width is less than 400px (Run Example)
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container
{
display: grid;
grid-template-columns: 100px 1fr;
grid-template-areas: "header header"
"sideMenu main"
"footer footer";
border: thin solid #cccccc;
}
#container > *
{
border: thin solid red;
background-color: #ffffaa;
}
header
{
grid-area: header;
}
#sideMenu
{
grid-area: sideMenu;
}
main
{
grid-area: main;
}
footer
{
grid-area: footer;
}
@media (max-width: 400px)
{
#container
{
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sideMenu"
"main"
"footer";
}
}
</style>
</head>
<body>
<div id="container">
<header>Header</header>
<nav id='sideMenu'>Side Menu</nav>
<main>Main</main>
<footer>Footer</footer>
</div>
</body>
</html>
Convert the example shown here, so that its layout is organised in a grid, as shown here. Your code should be responsive, so that the gird changes shape when the screen width is less than 400px.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.