CSS Grid Layout
CSS Grid Layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
What You'll Learn
- How to create responsive layout using Css Grid.
- Implement Grid template areas.
- How to use media queries.
What you'll need
- Firefox 54, Chrome 58, Edge 16, Safari 10.1, Opera 44 or above
- Your favorite text editor
- Basic knowledge of HTML, CSS
Project Set Up
Fire up a code editor, and create two files index.html and style.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" />
<title>Css Grid</title>
</head>
<body>
<h3> Css Grid </h3>
</body>
</html>
style.css
* { box-sizing: border-box; }
.grid-container {
max-width: 1024px;
margin: 0 auto;
font: 1.2em Helvetica, arial, sans-serif;
}
.grid-container > * {
border: 2px solid #f08c00;
background-color: #ffec99;
border-radius: 5px;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul {
flex-direction: column;
}
Optional
To avoid manual refresh install live-server
$ npm install -g live-server
To run it just type live-server from the folder where you created index.html and style.css files.
Adding HTML Content
We are going to create the layout using the named template areas that we learned about in the Grid template areas section.
The mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block that can host advertising for example.
Inside the body tag:
<div class="grid-container">
<header class="main-head"> The header</header>
<nav class="main-nav">
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
</article>
<aside class="side">Sidebar</aside>
<div class="ad">Advertising</div>
<footer class="main-footer">The footer</footer>
</div>
Grid Areas
As we are using grid-template-areas to create the layout we need to name the areas using the grid-area property.
.main-head {
grid-area: header;
}
.content {
grid-area: content;
}
.main-nav {
grid-area: nav;
}
.side {
grid-area: sidebar;
}
.ad {
grid-area: ad;
}
.main-footer {
grid-area: footer;
}
Design first for Mobile
This will not create any layout, however our items now have names we can use to do so. We are going to set up the layout for the mobile width first. There are no columns or row tracks defined but this layout dictates a single column, and rows will be created as needed for each of the items in the implicit grid.
.grid-container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
Add Media Queries
After setting up a mobile layout we will get this single column at all screen sizes, we can now add a media query and redefine our layout for bigger screens.
@media (min-width: 500px) {
.grid-container {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
}
You can see the layout taking shape in the value of grid-template-areas. The header spans over two column tracks as does the nav. In the third row track we have the sidebar alongside the content. In the fourth row track we can place ad content – so it appears under the sidebar, then the footer next to it under the content. We are using flexbox on the navigation to display it in a row spaced out.
We can now add a final breakpoint to move to a three-column layout.
@media (min-width: 700px) {
.grid-container {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"
}
nav ul {
flex-direction: column;
}
}
Exercise
Play with the browser window to see how the layout changes depending on the size
Well Done
Well done you have create a simple and responsive layout using CSS Grid and Media Queries.
