There are several ways we can make use of responsive web design,One of it is CSS grid
CSS grid is a concept in Cascading Style Sheets that allows web developers to create complex responsive web design layouts more easily and consistently across browsers. There are also several ways of controlling our web layout, which are:
- CSS flexbox
- Media Queries
BROWSER SUPPORT
Chrome, Firefox, Safari and Edge all support CSS grid. IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera Mini and UC Browser.
GRID-DEFINITION
To define a Grid use display:grid or display:inline-grid on the parent element. You can create a grid using the grid-template-columns and grid-template-rows properties.
I am using the grid-gap property to create a gap between my columns and rows of 10px. This property is a shorthand for grid-column-gap and grid-row-gap so you can set these values individually.
All direct child of the parent now become grid items, one in each grid cell. Creating extra rows as needed. Making use of an external css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<div class="parent">
<div class="childA">BOX 1</div>
<div class="childB">BOX 2</div>
<div class="childC">BOX 3</div>
<div class="childD">BOX 4</div>
</div>
CSS
body {
margin: 40px;
}
.parent {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.child {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
GRID ELEMENTS
We have the Grid Columns, Grid Rows, Grid Gaps, Grid Lines
Grid Columns
The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying a grid item's size and location within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. The grid-column-start longhand is set to the value before the slash, and the grid-column-end longhand is set to the value after the slash.
LINE-BASED PLACEMENT WITH CSS GRID
As you position some items, other items on the grid will continue to be laid out using the auto-placement rules. We will take a proper look at how these work in other episode but you can see as you work that grid is laying out un-placed items into empty cells of the grid. Addressing each item individually we can place all four items spanning row and column tracks. Note that we can leave cells empty if we wish. One of the very nice things about Grid Layout is this ability to have white space in our designs. Making use of an external css. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<div class="parent">
<div class="childA">BOX 1</div>
<div class="childB">BOX 2</div>
<div class="childC">BOX 3</div>
<div class="childD">BOX 4</div>
</div>
CSS
body {
margin: 40px;
}
.childA {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
}
.childB {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.childC{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.childD {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
Grid Features
Fixed and flexible track sizes
You can create a grid with fixed track sizes – using pixels for example. This sets the grid to the specified pixel which fits to the layout you desire. You can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose.
Item placement You can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. Grid also contains an algorithm to control the placement of items not given an explicit position on the grid.
Creation of additional tracks to hold content You can define an explicit grid with grid layout. The Grid Layout specification is flexible enough to add additional rows and columns when needed. Features such as adding “as many columns that will fit into a container” are included.
Alignment control Grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned.
Control of overlapping content More than one item can be placed into a grid cell or area and, they can partially overlap each other. This layering may then be controlled with the z-index property.
Grid is a powerful specification that, when combined with other parts of CSS such as flexbox, can help you create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your grid container.
The fr unit in CSS GRID:
Fr is a fractional unit and 1fr is for 1 part of the available space. The following are a few examples of the fr unit at work. Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
}
In this second example,, we create a definition with a 2fr track then two 1fr tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.
.space {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
In this final example, we mix absolute sized tracks with fraction units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.
.space {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
Track listings with repeat() notation Large grids with many tracks can use the repeat() notation, to repeat all or a section of the track listing. For example the grid definition:
.space {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
This above example can also be written as
.space {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Repeat Notation The repeat notation can be used for a part of the track listing. In the example below I created a grid with an initial 10-pixel track, then a repeating section of 6 1fr tracks then a final 10-pixel track.
.space {
display: grid;
grid-template-columns: 10px repeat(6, 1fr) 10px;
}
Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In the example below, my grid will consist of 10 tracks, a 1fr track, and then followed by a 2fr track. This will be repeated five times.
.space {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
Grid-Template-Columns Property
When creating our example grid we specifically defined our column tracks with the grid-template-columns property, but the grid also created rows on its own. These rows are part of the implicit grid, (If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid.). Whereas the explicit grid consists of any rows and columns defined with grid-template-columns or grid-template-rows, We can also define the explicit grid as a fixed number of lines and tracks that form a grid by using the properties grid-template-rows, grid-template-columns, and grid-template-areas. Example of an explicit grid .space { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 20px; }
Examples on grid-templates-column-property
<!doctype html>
<title>Grid Templates</title>
<style>
.space {
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
height: 100vh;
margin: 0;
}
.space > div {
color: white;
font-size: 4vw;
padding: 10px;
background: blue;
}
.space > div:nth-child(1) {
grid-column: span 4;
}
.space > div:nth-child(2) {
grid-row: span 4;
}
.space > div:nth-child(4) {
grid-column: span 2;
}
.space > div:nth-child(5) {
grid-column: span 2;
}
.space > div:nth-child(10) {
grid-column: span 3;
}
</style>
<div class= "space">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
You can also define a set size for tracks created in the implicit grid with the grid-auto-rows and grid-auto-columns properties.
In the example below we used grid-auto-rows to ensure that tracks created in the implicit grid are 200 pixels tall.
<div class="space">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
</div>
.space {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
Grid Area Grid areas are an alternative to providing lines and offer a way to name grid areas so that items can easily fit into these named areas. It may seem a bit confusing at first, but the power of grid areas quickly becomes evident. Grid-Area Named areas First you define names of your choice on grid items with the grid-area property:
.space1 {
grid-area: head;
}
.space2 {
grid-area: main;
}
.space3 {
grid-area: side;
}
.space4 {
grid-area: footer;
}
To describe the layout with grid-template-areas: Then, on the grid container, you use the grid-template-areas property to define how the named areas get applied:
.container {
display: grid;
grid-template-columns: 2fr 2fr 1fr 2fr;
grid-template-rows: 100px 200px 100px;
grid-template-areas:
"head head . side"
"main main . side"
"footer footer footer footer";
}
N.B: Each section in quotes is a row and each word represents a column. Spaces are not relevant and you can play around with the format. Here for example is an equivalent to the above snippet:
.container {
grid-template-areas:
"head head ..... side"
"main main ..... side"
"footer footer footer footer";
}
Acording to Jen Simmons She said: "We need to explore CSS Grid until we understand what it wants to do, what it can be forced into doing, and what it refuses to do. Many designers may not ever learn to code CSS, but you need to understand CSS well enough to understand our artistic medium."
And sure, all the code above looks very strange at first. But what it means is that we don’t have to use giant CSS frameworks or also a whole bunch of layout hacks before we can achieve this . But what really excites me most about Grid is that it compels us to see the space inside a browser in a completely new way.
We will be discussing Flex Box in the next episode of Snippet Series. Hope to see you back here soon.