CSS Grid Layout Module (CSS Grid) is one of the most widely used and popular mechanisms which provides flexibility to create/build or design complex, nested, highly professional and two-dimensional system layouts (2D - handles both columns as well as rows).
Hi All, I'm Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to CSS Grid Tutorial for beginners.
This is a comprehensive guide to the CSS Grid Layout Module. This complete guide explains everything about the CSS Grid Layout Module (CSS Grid).
This Course/Tutorial is ideal for:
- Any Web designer/developer interested in getting a deep understanding of CSS Grid Layout Module (CSS Grid)
- CSS lovers want to acquire knowledge of next/latest CSS level (properties/features)
- Candidates desire to become CSS Expert and better Front End web Developer / Designer
- Web designers/developers who want to improve skills with new web standards
After completing/attending/finishing this Course/Tutorial, participants should be able to:
- Align/arrange elements using modern CSS module, like CSS Grid
- Create Complex grid-based web layouts
- Use the new CSS3 Grid model to create responsive web layouts more effectively!
- Use/Operate CSS Grid confidently to create modern/advanced layouts
- implement complete complex-nested site layouts / create modern grids
- Basic knowledge of HTML5 and CSS3
-
- 1.1. What is CSS Grid
- 1.2. Layout modes
- 1.3. Why CSS Grid?
- 1.4. Browser support
- 1.5. Important Terminology
-
- 2.1. Grid Display
- 2.2. Grid Template Columns
- 2.3. The fr Unit
- 2.4. The repeat() function
- 2.5. Grid Template Rows
- 2.6. Grid Column Gap
- 2.7. Grid Row Gap
- 2.8. Grid Gap
- 2.9. Grid Template Areas
- 2.10. Grid Template
- 2.11. Nested Grid
-
- 3.1. Grid Lines - Columns
- 3.2. Grid Lines - Rows
- 3.3. Grid Lines - Grid Column
- 3.4. Grid Lines - Grid Row
- 3.5. Alignment and Justifying items
CSS Grid is a two-dimensional layout systemcreated specifically to tackle grid-based user interfaces on the webCSS Grid Layout Moduleis a CSS3 layout mode that provides an easy, professional and advanced clean way to arrange child elements/items within a container- CSS Grid is a brand new layout system in CSS! It's not a framework or library - it's an addition to the CSS stylesheet language that allows us to quickly
create flexible, two-dimensional layouts(with Columns and Rows) - CSS Grid can be used to
place, size, align, arrange and architect complex layouts/designsthat were previously pretty difficult or even impossible with floats or flexbox - The Grid Layout Working Draft was published back in April 2011, W3C Candidate Recommendation as of 14 December 2017
Before CSS there were 5 layout modes/models:
Block(for different sections in a webpage)Inline(for text and spans in the same line)Table(for two-dimensional tabular data)Position(for the explicit position of an element)Flexbox(for one-dimensional grid layout)
- Different positional properties like
fixed, absoluteto set alignment at the exact required place Floats and clear fixesto create navigation, detailed section- Fixed heights columns to show equality
- Above mentioned layout modes does not provide enough flexibility to create/build or design professional/nested/modern layouts
- we need to include another CSS mechanism like Floats, Vertical alignment of text/elements and other hacks with Margin, Padding to create the accurate/desired layout
CSS Flexible Box Layout Module (Flexbox), makes it easier to design flexible responsive layout structure without using float or positioning
Grid/CSS Grid Layout provides lots of flexibilities while creating complex layouts like:
- CSS Grid is a new way of creating layouts, the first time a proper layout system available natively in the browser with tons of benefits
- Grid is a new CSS display type designed to craft CSS layouts in a much easier way
- No CSS Float used
- Offers ultimate flexibility to create complex layouts without using extra markup or containers or floats
- Helps to create a nested Grid layout and place them on a webpage
- Arrange items from left to right or top to bottom and vice versa
- Adjust the spacing between objects
- Position and alignments of items
- Order and placements of various elements
- Improve the items alignment, directions and order in the container even when they are with dynamic or even unknown size
- Equal height columns
- Ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes
- Control the position, size, and spacing of child elements relative to parent container and other child elements
- CSS Grid works great responsively (RWD - Responsive Web Design)
- Responsive and Mobile friendly
The CSS Grid properties are supported in all modern browsers:
Let's learn some of the Important Terminology/concepts related to CSS Grid Layout to get proper understandings and how does it work. Here are the main terms or entities while dealing with CSS Grid:
display:grid(CSS property/style which converts an HTML element to a grid container -display: grid or inline-grid)
Grid Container(Direct Parent/Container to hold sub-items, to the container we applydisplay: grid or inline-gridproperty)Grid Items(Child/sub-items [direct descendants] within Container - All direct children of thegrid containerautomatically becomegrid items)Grid Column(The vertical series-part/portrait lines of the grid, table, chart or spreadsheet. CSS property isgrid-template-columns)Grid Row(The horizontal series-part/landscape lines of the grid, table, chart or spreadsheet. CSS property isgrid-template-rows)Grid Gaps(The spaces (margin or cell-spacing) between each column/row. CSS property isgrid-column-gapandgrid-row-gap)Grid Line(The lines between columns/rows, the dividing lines that make up the structure of the grid. CSS property isgrid-column-start,grid-column-endandgrid-row-start,grid-row-end)Grid Track(A grid track is a space between 2 adjacent grid lines, they are the rows and columns of your grid)Grid Cell(A box/intersection point where the column and row get insects it creates a box/cell like a table cell, A grid cell is the space between 2 adjacent row grid lines and 2 adjacent column grid lines)Grid Area(The total space surrounded by four grid lines, A grid area is made up of 1 or more grid cells, and is bound by 4 grid lines on each side of the grid area. CSS property is grid-item =grid-area, grid-container =grid-template-areas)The fr Unit(The newfr unit (fractional unit)represents a fraction of the available space or free space available in the grid container. Simply available space is nothing but free space so you can also considerfrasfree space. CSS property isgrid-template-columns/rows: 1fr 1fr 1fr)Explicit Column/RowAny Column or Row created as per needs and requirements with propertygrid-template-columnsandgrid-template-rowsrespectively (Explicit = Developer or User defines how many Columns or Rows required)Implicit Column/RowAuto-generated Column/Row.grid-auto-columnsandgrid-auto-rowsproperty used to handle/control/size any auto-generated grid tracks ie. implicit grid (Implicit = Automatically generated Column/Row. [Total Grid Items are 10, we defined 2 columns and 2 Rows withgrid-template-columnsandgrid-template-rowsproperty, so 4 items areExplicitand rest 6 items areImplicit])
To start with CSS Grid just apply a property display type of grid to the parent container/Grid Container (grid container), so Grid Items/child items/elements automatically turn to the grid item.
Syntax & Example:
1.5-grid-container-item.html basic markup
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
</div>Syntax & Example:
1.5-grid-container-item.html default markup and output
<!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">
<title>1.5-grid-container-item.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
margin: 0 auto;
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
</div>
</body>
</html>
Syntax & Example:
1.5-flex-container-item.html display:grid
<style type="text/css">
.main-container {
border: 4px solid #826a98;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline grid container */
}
</style>Let's look into some of the important properties used with Grid Container:
display- It defines the Grid Container inline or block
- An important and mandatory property to work with CSS Grid
grid-template-columns- Defines/specify grid track list for all the columns in the grid with grid tracks and line names
grid-template-rows- Defines/specify grid track list for all the rows in the grid with grid tracks and line names
grid-template-areas- Defines a grid template by referencing the names of the grid areas which are specified/named with the grid-area property for visualisation of the grid structure
grid-template- Shorthand property for defining/setting a combination of grid-template-columns, grid-template-rows and grid-template-areas
grid-column-gap- The spaces (margin or cell-spacing or gutter) between each column/row, it specifies the size of the grid lines
grid-row-gap- The spaces (margin or cell-spacing or gutter) between each row/column, it specifies the size of the grid lines
grid-gap- Shorthand property for setting grid-row-gap and grid-column-gap in a single declaration
justify-items- Defines alignment of items along the main ie. inline (row) axis (horizontal)
align-items- Defines how grid items layout/laid out with the cross ie. block (column) axis (vertical)
place-items- place-items sets both the align-items (columner or vertical) and justify-items (row or horizontal) properties in a single declaration
justify-content- Defines alignment of items (distributes space between grid items) along the main axis (horizontal)
align-content- Defines alignment of items (distributes space between grid items) along the cross axis (vertical)
place-content- Shorthand CSS property for align-content and justify-content in a single declaration
grid-auto-columns- Specifies the size of any auto-generated grid tracks ie. implicit grid tracks columns
grid-auto-rows- Specifies the size of any auto-generated grid tracks ie. implicit grid tracks rows
grid-auto-flow- Controls/adjust how the automatic placement of grid items work when they are not explicitly positioned with any grid-placement properties
grid- Shorthand for setting properties like: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow in a single declaration
- To create a grid container, we set the value of the container's
displayproperty togridorinline-grid - It creates/builds a
grid formatting contextfor its content. It only applies to direct child elements and does not extend to grandchild elements and beyond
display property creates either a block-level or inline-level grid container:
display: grid;- block level grid, covers 100% width
display: inline-grid;- inline-level, same line grid, covers only required width as per items width
- syntax:
.container {
/* display: grid; */ /* block level grid container */
/* display: inline-grid; */ /* inline grid container */
display : grid | inline-grid;
}Syntax & Example:
2.1-grid-display.html, display: grid; /* block level grid container */
<!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">
<title>2.1-grid-display</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline grid container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
Syntax & Example:
2.1-grid-display.html, display: inline-grid; /* inline grid container */
.main-container {
border: 4px solid #826a98;
margin: 0 auto;
/* display: grid; */ /* block level grid container */
display: inline-grid; /* inline grid container */
}
- The vertical series-part/portrait lines of the grid, table, chart or spreadsheet are known/called as
columns. CSS property to create columns isgrid-template-columns grid-template-columnsproperty defines the columns of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line- It simply defines/specify number of columns in grid layout (how many columns we want in the grid) with grid track list for all the columns in the grid with grid tracks and line names
- syntax:
.container {
/*grid-template-columns: <track-size> | <line-name> <track-size>; */
/* grid-template-columns: 150px 350px 480px; */ /* 3 columns in grid with different width - in pixel */
/* grid-template-columns: 15% 35% 48%; */ /* width - in percentage */
grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto/available space */
}Syntax & Example:
2.2-grid-template-columns-width-px-auto.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">
<title>2.2-grid-template-columns-width-px-auto.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
/* grid-template-columns: 150px 350px 500px; */ /* 3 columns grid with different width - in pixel */
/* grid-template-columns: 15% 35% 50%; */ /* width - in percentage */
grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- When sizing rows and columns, one can use different CSS lengths like px, % percentage, rem, auto (like 250px or 20%) and perhaps the most useful and important one is
frie. thefractional units frie. thefractional unitsis a flexible length, declared using thefr, which takes up a share of the remaining free space in proportion to its flex factor- The new
fr Unitrepresents a fraction of the available space in the grid container - Example: Given a grid container of
1000px with 3 columnsof200px, 2fr and 3frrespectively. The flexibly sized columns will take up the remaining800pxin the ratio of2:3(remaining 800px divided into 5 equal parts of 160px each), so the second column takes up 320px and the third column takes up 480px - CSS property is
grid-template-columns/rows: 1fr 1fr 1fr) - syntax:
.container {
/*grid-template-columns: <track-size> | <line-name> <track-size>; */
grid-template-columns: 200px 2fr 3fr; /* fr/fraction = proportionate size/space ie. 200px 320px 48px */
/* grid-template-columns: 1fr 200px; */ /* fr/fraction = proportionate size/space ie. 88px 200px */
}Syntax & Example:
2.3-grid-template-columns-width-fr-fraction-unit.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">
<title>2.3-grid-template-columns-width-fr-fraction-unit.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
grid-template-columns: 200px 2fr 3fr; /* fr/fraction = proportionate size/space ie. 200px 320px 48px */
/* grid-template-columns: 1fr 200px; */ /* fr/fraction = proportionate size/space ie. 800px 200px */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- The
repeat() functionallows us to repeat/iterate something (columns or rows) n number of times - We can use the
repeat() notationto define repeating parts while declaring columns or rows and save some typing - CSS property is
grid-template-columns/rows: repeat(2, 1fr)) - syntax:
.container {
/*grid-template-columns: <track-size> | <line-name> <track-size>; */
grid-template-columns: repeat(2, 1fr); /* 2 columns of 1fr each of equal width */
}Syntax & Example:
2.4.1-grid-template-columns-repeat.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">
<title>2.4.1-grid-template-columns-repeat.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
grid-template-columns: repeat(2, 1fr); /* 2 columns of 1fr each of equal width */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
Syntax & Example:
2.4.2-grid-template-columns-repeat.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">
<title>2.4.2-grid-template-columns-repeat.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
grid-template-columns: repeat(1, 1fr 2fr 1fr); /* repeate 3 columns 1 time and create 3 columns of different width */
/* grid-template-columns: repeat(6, 1fr 2fr); */ /* repeate 2 columns 6 times = create 12 columns of different width */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
<div class="item item-11">item-11</div>
<div class="item item-12">item-12</div>
</div>
</body>
</html>
- The horizontal series-part/landscape lines of the grid, table, chart or spreadsheet are known/called as
rows. CSS property to create rows isgrid-template-rows grid-template-rowsproperty defines the rows of the grid with a space-separated list of values. The values represent the track size (height), and the space between them represents the grid line- It simply defines/specifies the height of each row present in grid layout container ie.
explicit grid tracks rows - Grid rows are calculated and created automatically (as it depends on two things: the number of columns defined and the total number of grid items ie. content present)
- Row height is fully dependent on text matter/content available inside the grid item. By default min-height of a row is equivalent to the height of text contents
grid-auto-rowsproperty helps to define/specify and set the height of all rows inside grid container (Specifies the size of any auto-generated grid tracks ie.implicit grid tracks rows)minmax(minHight, maxHight)function is also used to set default minimum default height and specify maximum height if content expanded/enlarged. example:minmax(50px, auto)- syntax:
.container {
/*grid-template-rows: <track-size> | <line-name> <track-size>; */
grid-template-rows: 100px 300px 100px; /* defines the height of each row - in pixel */
/* grid-template-rows: 20% 60% 20%; */ /* height of each row - in percentage */
/* grid-template-rows: auto auto auto; */ /* height of each row - in combination of pixel, percentage and auto */
/* grid-template-rows: 1fr 2fr 1fr; */ /* height of each row - in fr fractional unit */
}Syntax & Example:
2.5.1-grid-template-rows-height-px-auto-fr-fraction-unit.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">
<title>2.5.1-grid-template-rows-px-auto.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
height: 500px;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
grid-template-columns: 150px 35% auto;
grid-template-rows: 100px 300px 100px; /* defines the height of each row - in pixel */
/* grid-template-rows: 20% 60% 20%; */ /* height of each row - in percentage */
/* grid-template-rows: auto auto auto; */ /* height of each row - in combination of pixel, percentage and auto */
/* grid-template-rows: 1fr 2fr 1fr; */ /* height of each row - in fr fractional unit */
}
.item {
color: #000;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1: Row height is by default depends on content</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6: Row height is by default depends on content 1 , Row height is by default depends on content 2 , Row height is by default depends on content 3, Row height is by default depends on content 4 , Row height is by default depends on content 5 , Row height is by default depends on content 6 , Row height is by default depends on content 7, Row height is by default depends on content 8</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8: Row height is by default depends on content 1 , Row height is by default depends on content 2 , Row height is by default depends on content 3, Row height is by default depends on content 4 </div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
Syntax & Example:
2.5.2-grid-template-rows-height-minmax.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">
<title>2.5.2-grid-template-rows-height-minmax.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
grid-template-columns: 150px 35% auto;
grid-template-rows: repeat(3, minmax(50px, auto)); /* repeat the rows with minimum height of 50px and maximum auto */
}
.item {
color: #000;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6: Row height is by default depends on content 1 , Row height is by default depends on content 2 , Row height is by default depends on content 3, Row height is by default depends on content 4 , Row height is by default depends on content 5 , Row height is by default depends on content 6 , Row height is by default depends on content 7, Row height is by default depends on content 8</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- The spaces (margin or cell-spacing or gutter) between each column, it specifies the size of the grid lines. We can think of it like setting the width of the gutters/margin/spacing between the columns
Note: When we apply Margin to grid item/child it by default applies to all sides as well as outside of grid item/child so eventually to grid container - to avoid this unwanted gaps we must use and apply
grid-column-gap or grid-row-gap or grid-gapproperty
- syntax:
.container {
grid-column-gap: <line-size>;
grid-column-gap: 10px;
}Syntax & Example:
2.6-grid-column-gap.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">
<title>2.6-grid-column-gap.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
grid-column-gap: 10px;
/* grid-row-gap: 10px; */
/* grid-gap: 10px; */
grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- The spaces (margin or cell-spacing or gutter) between each row, it specifies the size of the grid lines. We can think of it like setting the width of the gutters/margin/spacing between the rows
- syntax:
.container {
grid-row-gap: <line-size>;
grid-row-gap: 10px;
}Syntax & Example:
2.7-grid-row-gap.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">
<title>2.7-grid-row-gap</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
/* grid-column-gap: 10px; */
grid-row-gap: 10px;
/* grid-gap: 10px; */
grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto */
grid-template-rows: 100px 70px 100px; /* row height in pixel */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- A shorthand property for setting grid-row-gap and grid-column-gap in a single declaration. We can think of it like setting the width of the gutters/margin/spacing between the columns/rows
- syntax:
.container {
grid-gap: <grid-row-gap> <grid-column-gap>;
/* grid-column-gap: 10px;
grid-row-gap: 10px; */
/* grid-gap: 20px; */ /* single value for both row as well column gap */
grid-gap: 20px 10px;
}Syntax & Example:
2.8-grid-gap.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">
<title>2.8-grid-gap.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
width: 1000px;
margin: 0 auto;
display: grid; /* block level grid container */
/* display: inline-grid; */ /* inline level grid container */
grid-column-gap: 10px;
/* grid-row-gap: 10px; */
/* grid-gap: 20px; */ /* single value for both row as well column gap */
grid-gap: 20px 10px;
grid-template-columns: 150px 35% auto; /* width - in combination of pixel, percentage and auto */
grid-template-rows: 100px 70px 100px; /* row height in pixel */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #8FBC8E;
}
.main-container div:nth-child(even) {
background: #734F96;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<!-- <div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- Defines a grid template by referencing the names of the grid areas which are specified/named with the
grid-areaproperty for visualisation of the grid structure - This property defines
named grid areasand provides a visualisation of the grid structure, which may help and significantly make underlying code easier to understand - Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell
- syntax:
.container {
grid-template-areas:
"<grid-area-name> | . | none | ..."
"...";
- <grid-area-name> - the name of a grid area specified with grid-area
- . - a period signifies an empty grid cell
- none - no grid areas are defined
}Syntax & Example:
2.9.1-grid-template-area-web-layout.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">
<title>2.9.1-grid-template-area-web-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
grid-template-areas:
"headerArea headerArea headerArea headerArea"
"mainArea mainArea asideArea asideArea"
"mainArea mainArea navArea navArea"
"sectionArea sectionArea sectionArea sectionArea"
"footerArea footerArea footerArea footerArea";
}
.main-container > * {
background-color: #00bcd4;
padding: 20px;
}
.header-section {
grid-area: headerArea;
background-color: #0199ad;
}
.main-section {
grid-area: mainArea;
}
.section {
grid-area: sectionArea;
}
.aside-section {
grid-area: asideArea;
}
.nav-section {
grid-area: navArea;
}
.footer-section {
grid-area: footerArea;
background-color: #0199ad;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<section class="section">Section Section</section>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
2.9.2-grid-template-area-web-layout.html
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(80px, auto);
grid-gap: 20px;
grid-template-areas:
"headerArea headerArea headerArea headerArea"
"asideArea asideArea mainArea mainArea "
"navArea navArea mainArea mainArea "
"sectionArea sectionArea sectionArea sectionArea"
"sectionArea sectionArea sectionArea sectionArea"
"footerArea footerArea footerArea footerArea";
}
Syntax & Example:
2.9.3-grid-template-area-web-layout-empty-cell-area.html
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(80px, auto);
grid-gap: 20px;
grid-template-areas:
"headerArea headerArea headerArea headerArea"
"asideArea . mainArea mainArea "
". . mainArea mainArea "
"navArea . sectionArea sectionArea"
". . sectionArea sectionArea"
"footerArea footerArea footerArea footerArea";
}
- A shorthand property for defining/setting a combination of grid-template-columns, grid-template-rows and *grid-template-areas
grid-templateproperty is a shorthand for setting properties likegrid-template-rows,grid-template-columns, andgrid-template-areasin a single declaration- syntax:
.container {
grid-template: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas>;
- none - sets all three properties to their initial values
}Syntax & Example:
2.11-nested-grid-template.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">
<title>2.11-nested-grid-template.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #000000;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
grid-template-areas:
"headerArea headerArea headerArea headerArea"
"mainArea mainArea asideArea asideArea"
"mainArea mainArea navArea navArea"
"sectionArea sectionArea sectionArea sectionArea"
"footerArea footerArea footerArea footerArea";
}
.main-container > * {
background-color: #e6ba6c;
padding: 20px;
}
.header-section {
grid-area: headerArea;
background-color: #bd7b04;
}
.main-section {
grid-area: mainArea;
}
.section {
grid-area: sectionArea;
}
.aside-section {
grid-area: asideArea;
}
.nav-section {
grid-area: navArea;
}
.footer-section {
grid-area: footerArea;
background-color: #bd7b04;
}
.nested-grid-container {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 150px;
grid-gap:10px;
}
.nested-grid-container article{
background-color: #bb8b34;
padding:10px;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">
<strong>Main Section with Nested Sub Section</strong>
<section class="nested-grid-container">
<article class="article1">Article 1</article>
<article class="article2">Article 2</article>
<article class="article3">Article 3</article>
<article class="article4">Article 4</article>
</section>
</main>
<section class="section">Section Section</section>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
.nested-grid-container {
margin-top: 20px;
display: grid;
/* grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 150px; */
grid-gap:10px;
/* */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 150px;
}
.nested-grid-container {
margin-top: 20px;
display: grid;
/* grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 150px; */
grid-gap:10px;
/* */
/* grid-template-columns: 1fr 1fr;
grid-template-rows: auto 150px; */
/* */
grid-template-columns: 1fr 1fr;
}
Let us look into the some of the important properties used with and applicable to Grid Item or Child Elements (usually known as Items, present inside Grid container):
grid-column-start- Determines/indicates the column grid line where the grid item starts
- Specifies a grid item's start position/location within the grid column
grid-column-end- Determines/indicates the column grid line where the grid item ends
- Specifies a grid item's end position/location within the grid column
grid-row-start- Determines/indicates the row grid line where the grid item starts
- Specifies a grid item's start position/location within the grid row
grid-row-end- Determines/indicates the row grid line where the grid item ends
- Specifies a grid item's end position/location within the grid row
grid-column- Shorthand property that sets the start line and end line grid-column-start and grid-column-end for the respective dimensions in the same declaration
grid-row- Shorthand property that sets the start line and end line grid-row-start and grid-row-end for the respective dimensions in the same declaration
grid-area- Gives an item a name so that it can be referenced by a template created with the containers grid-template-areas property
- Alternatively its shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end
justify-self- Aligns a grid item inside a cell along the inline (row) axis, this value applies to a grid item inside a single cell
align-self- Aligns a grid item inside a cell along the block (column), this value applies to the content inside a single grid item
place-self- Shorthand property sets both the align-self and justify-self properties
grid-column-start- Determines/indicates the column grid line where the grid item starts
- Specifies a grid item's start position/location within the grid column
grid-column-end- Determines/indicates the column grid line where the grid item ends
- Specifies a grid item's end position/location within the grid column
- syntax:
.grid-item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-column-start: 1;
grid-column-end: 3;
}Syntax & Example:
3.1.1-grid-lines-grid-column-start-end-web-layout.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">
<title>3.1.1-grid-lines-grid-column-start-end-web-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #ff7f50;
padding: 20px;
}
.header-section {
background-color: #e03f00;
grid-column-start: 1;
grid-column-end: 7;
}
.main-section {
grid-column-start: 1;
grid-column-end: 5;
}
.aside-section {
grid-column-start: 5;
grid-column-end: 7;
}
.nav-section {
grid-column-start: 1;
grid-column-end: 3;
}
.section {
grid-column-start: 3;
grid-column-end: 7;
}
.footer-section {
background-color: #e03f00;
grid-column-start: 1;
grid-column-end: 7;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
3.1.2-grid-lines-grid-column-start-end-web-layout.html
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, minmax(70px, auto));
grid-gap: 20px;
}
.header-section {
background-color: #e03f00;
grid-column-start: 1;
grid-column-end: 7;
}
.main-section {
grid-column-start: 2;
grid-column-end: 6;
}
.aside-section {
grid-column-start: 1;
grid-column-end: 4;
}
.nav-section {
grid-column-start: 4;
grid-column-end: 7;
}
.section {
grid-column-start: 2;
grid-column-end: 6;
}
.footer-section {
background-color: #e03f00;
grid-column-start: 1;
grid-column-end: 7;
}
grid-row-start- Determines/indicates the row grid line where the grid item starts
- Specifies a grid item's start position/location within the grid row
grid-row-end- Determines/indicates the row grid line where the grid item ends
- Specifies a grid item's end position/location within the grid row
- syntax:
.grid-item {
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: 1;
grid-row-end: 3;
}Syntax & Example:
3.2.1-grid-lines-grid-row-start-end-web-layout.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">
<title>3.2.1-grid-lines-grid-row-start-end-web-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #ff6c88;
padding: 20px;
}
.header-section {
background-color: #ed143d;
grid-column-start: 1;
grid-column-end: 7;
}
.main-section {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start:2;
grid-row-end:4;
}
.aside-section {
grid-column-start: 5;
grid-column-end: 7;
grid-row-start:3;
grid-row-end:4;
}
.nav-section {
grid-column-start: 1;
grid-column-end: 3;
}
.section {
grid-column-start: 3;
grid-column-end: 7;
grid-row-start:4;
grid-row-end:6;
}
.footer-section {
background-color: #ed143d;
grid-column-start: 1;
grid-column-end: 7;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
3.2.2-grid-lines-grid-row-start-end-web-layout.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">
<title>3.2.2-grid-lines-grid-row-start-end-web-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #ff6c88;
padding: 20px;
}
.header-section {
background-color: #ed143d;
grid-column-start: 1;
grid-column-end: 7;
}
.main-section {
grid-column-start: 2;
grid-column-end: 6;
}
.aside-section {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 5;
}
.nav-section {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 5;
}
.section {
grid-column-start: 2;
grid-column-end: 6;
}
.footer-section {
background-color: #ed143d;
grid-column-start: 1;
grid-column-end: 7;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
grid-column- A shorthand property that sets the start line and end line grid-column-start and grid-column-end for the respective dimensions in the same declaration
- syntax:
.grid-item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
/* grid-column-start: 1;
grid-column-end: 3; */
grid-column: 1/3;
}Syntax & Example:
3.3.1-grid-lines-grid-column-layout.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">
<title>3.3.1-grid-lines-grid-column-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #ff7f50;
padding: 20px;
}
.header-section {
background-color: #e03f00;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
.main-section {
/* grid-column-start: 1;
grid-column-end: 5; */
grid-column:1/5;
}
.aside-section {
/* grid-column-start: 5;
grid-column-end: 7; */
grid-column: 5/7;
}
.nav-section {
/* grid-column-start: 1;
grid-column-end: 3; */
grid-column: 1/3;
}
.section {
/* grid-column-start: 3;
grid-column-end: 7; */
grid-column: 3/7;
}
.footer-section {
background-color: #e03f00;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
3.3.2-grid-lines-grid-column-layout.html
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #ffaf5f;
padding: 20px;
}
.header-section {
background-color: #e08931;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
.main-section {
/* grid-column-start: 2;
grid-column-end: 6; */
grid-column: 2/6;
}
.aside-section {
/* grid-column-start: 1;
grid-column-end: 4; */
grid-column: 1/4;
}
.nav-section {
/* grid-column-start: 4;
grid-column-end: 7; */
grid-column: 4/7;
}
.section {
/* grid-column-start: 2;
grid-column-end: 6; */
grid-column: 2/6;
}
.footer-section {
background-color: #e08931;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
grid-row- Shorthand property that sets the start line and end line grid-row-start and grid-row-end for the respective dimensions in the same declaration
- syntax:
.grid-item {
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
/* grid-row-start: 1;
grid-row-end: 3; */
grid-row: 1/3;
}Syntax & Example:
3.4.1-grid-lines-grid-row-layout.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">
<title>3.4.1-grid-lines-grid-row-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #a9da41;
padding: 20px;
}
.header-section {
background-color: #739e17;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
.main-section {
/* grid-column-start: 1;
grid-column-end: 5;
grid-row-start:2;
grid-row-end:4; */
grid-column: 1/5;
grid-row: 2/4;
}
.aside-section {
/* grid-column-start: 5;
grid-column-end: 7;
grid-row-start:3;
grid-row-end:4; */
grid-column: 5/7;
grid-row: 3/4;
}
.nav-section {
/* grid-column-start: 1;
grid-column-end: 3; */
grid-column: 1/3;
}
.section {
/* grid-column-start: 3;
grid-column-end: 7;
grid-row-start:4;
grid-row-end:6; */
grid-column: 3/7;
grid-row: 4/6;
}
.footer-section {
background-color: #739e17;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
3.4.2-grid-lines-grid-row-layout.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">
<title>3.4.2-grid-lines-grid-row-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #a9da41;
padding: 20px;
}
.header-section {
background-color: #739e17;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
.main-section {
/* grid-column-start: 2;
grid-column-end: 6; */
grid-column: 2/6;
}
.aside-section {
/* grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 5; */
grid-column: 1/4;
grid-row:3/5;
}
.nav-section {
/* grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 5; */
grid-column: 4/7;
grid-row: 3/5;
}
.section {
/* grid-column-start: 2;
grid-column-end: 6; */
grid-column: 2/6;
}
.footer-section {
background-color: #739e17;
/* grid-column-start: 1;
grid-column-end: 7; */
grid-column: 1/7;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
3.4.3-grid-lines-grid-column-row-layout-span.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">
<title>3.4.3-grid-lines-grid-column-row-layout-span.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, minmax(70px, auto));
grid-gap: 20px;
}
.main-container > * {
background-color: #ddd459;
padding: 20px;
}
.header-section {
background-color:#aaa459;
/* grid-column-start: 1;
grid-column-end: 7; */
/* grid-column: 1/7; */
/* grid-column: 1 / -1; */ /* Negative ie -1 is used for last-till end column/row */
/* grid-column: span 6; */ /* cover-span 6 columns/row */
grid-column: 1 / span 6; /* start from 1st track and cover-span 6 */
}
.main-section {
/* grid-column-start: 2;
grid-column-end: 6; */
/* grid-column: 2/6; */
grid-column: 2 / span 4;
}
.aside-section {
/* grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 5; */
/* grid-column: 1/4;
grid-row:3/5; */
grid-column: 1 / span 3;
grid-row: 3 / span 2;
}
.nav-section {
/* grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 5; */
/* grid-column: 4/7;
grid-row: 3/5; */
grid-column: 4 / span 3;
grid-row: 3 / span 2;
}
.section {
/* grid-column-start: 2;
grid-column-end: 6; */
/* grid-column: 2/6; */
grid-column: 2 / span 4;
}
.footer-section {
background-color:#aaa459;
/* grid-column-start: 1;
grid-column-end: 7; */
/* grid-column: 1/7; */
/* grid-column: 1 / -1; */
/* grid-column: span 6; */
grid-column: 1 / span 6;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
3.4.4-grid-lines-grid-column-row-layout-span.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">
<title>3.4.4-grid-lines-grid-column-row-layout-span.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(4, 1fr 1fr);
grid-template-rows: repeat(10, 60px);
grid-gap: 10px;
}
.main-container > * {
background-color:#00bfff;
padding: 20px;
border: 2px solid #0000004f;
}
.item {
/* display: grid;
justify-content: center;
align-items: center; */
}
.item1 {
/* grid-column: 2 / 4; */
grid-column: 2 / span 2;
}
.item2 {
/* grid-column: 4 / -1; */
grid-column: 4 / span 5;
}
.item3, .item4 {
grid-column: span 2;
grid-row: span 2;
}
.item6, .item8 {
grid-row: span 2;
}
.item11 {
grid-column: 1 / -1;
/* grid-column: 1 / span 8; */
}
.item12, .item14 {
grid-column: span 3;
grid-row: span 3;
}
.item13, .item15 {
grid-row: span 3;
}
.item16, .item17 {
grid-column: span 4;
}
.item18 {
grid-column: 2 / span 6;
}
.item19 {
grid-column: 1 / span 8;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item1">Item 1 LOGO </div>
<div class="item item2">Item 2 NAVIGATION BAR </div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
<div class="item item7">Item 7</div>
<div class="item item8">Item 8</div>
<div class="item item9">Item 9</div>
<div class="item item10">Item 10</div>
<div class="item item11">Item 11</div>
<div class="item item12">Item 12</div>
<div class="item item13">Item 13</div>
<div class="item item14">Item 14</div>
<div class="item item15">Item 15</div>
<div class="item item16">Item 16</div>
<div class="item item17">Item 17</div>
<div class="item item18">Item 18</div>
<div class="item item19">Item 19</div>
<div class="item item20">Item 20</div>
<div class="item item21">Item 21</div>
<div class="item item22">Item 22</div>
<div class="item item23">Item 23</div>
<div class="item item24">Item 24</div>
<div class="item item25">Item 25</div>
<div class="item item26">Item 26</div>
<div class="item item27">Item 27</div>
<div class="item item28">Item 28</div>
<div class="item item29">Item 29</div>
<div class="item item30">Item 30</div>
</div>
</body>
</html>
justify-self- Aligns a grid item inside a cell along the inline (row - horizontal) axis, this value applies to a grid item inside a single cell
align-self- Aligns a grid item inside a cell along the block (column - vertical), this value applies to the content inside a single grid item
- syntax:
.grid-item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}Syntax & Example:
3.5-grid-item-alignment-justify-align-self.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">
<title>3.5-grid-item-alignment-justify-align-self.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
width: 1000px;
margin: 0 auto;
/* 3.5.1 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
grid-gap: 10px;
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #ffa500;
}
.main-container div:nth-child(even) {
background: #008080;
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.main-container div:nth-child(odd) {
background: #ffa500;
}
.main-container div:nth-child(even) {
background: #008080;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
</div>
</body>
</html>
.item-1 {
justify-self: end;
align-self: end;
}
.item-2 {
justify-self: center;
align-self: center;
}
.item-3 {
justify-self: start;
align-self: start;
}
.item-7 {
justify-self: end;
align-self: start;
}
.item-8 {
justify-self: center;
align-self: center;
}
.item-9 {
justify-self: start;
align-self: end;
}
.main-container div:nth-child(odd) {
justify-self: center;
align-self: center;
}
Syntax & Example:
4.1-demo-mosaic-layout.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">
<title>4.1-demo-mosaic-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
}
.item {
background-color: #1e90ff;
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
grid-column: 1/3;
grid-row: 1/5;
}
.item-2 {
grid-column: 3/7;
grid-row: 1/3;
}
.item-3 {
grid-column: 3/5;
grid-row: 3/5;
}
.item-4 {
grid-column: 5/7;
grid-row: 3/7;
}
.item-5 {
grid-column: 1/5;
grid-row: 5/7;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
</div>
</body>
</html>
.main-container {
width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
transform: rotate(45deg) scale(0.5);
}
Syntax & Example:
4.2-demo-responsive-grid-layout.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">
<title>4.2-demo-responsive-grid-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
/* Desktop view */
@media screen and (min-width: 760px){
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(80px, auto);
grid-gap: 20px;
grid-template-areas:
"headerArea headerArea headerArea headerArea"
"asideArea asideArea mainArea mainArea "
"navArea navArea mainArea mainArea "
"sectionArea sectionArea sectionArea sectionArea"
"sectionArea sectionArea sectionArea sectionArea"
"footerArea footerArea footerArea footerArea";
}
}
.main-container > * {
background-color: #00bcd4;
padding: 20px;
}
.header-section {
grid-area: headerArea;
background-color: #0199ad;
}
.main-section {
grid-area: mainArea;
}
.section {
grid-area: sectionArea;
}
.aside-section {
grid-area: asideArea;
}
.nav-section {
grid-area: navArea;
}
.footer-section {
grid-area: footerArea;
background-color: #0199ad;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<section class="section">Section Section</section>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
/* Mobile basic view is defualt, we get just after applying desktop media query */
/* Mobile enhanced view */
@media screen and (max-width: 760px) {
body {
font-size: 2rem;
}
.main-container > * {
padding: 40px !important;
}
.main-container {
width: 980px;
margin: 0 auto;
display: grid; /* block level grid container */
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 30px;
grid-template-areas:
"headerArea headerArea headerArea headerArea"
"footerArea footerArea footerArea footerArea"
"mainArea mainArea mainArea mainArea"
"mainArea mainArea mainArea mainArea"
"asideArea asideArea navArea navArea"
"sectionArea sectionArea sectionArea sectionArea"
"sectionArea sectionArea sectionArea sectionArea";
}
}
Syntax & Example:
4.3-demo-custom-12-column-grid-framework.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">
<title>4.3-demo-custom-12-column-grid-framework.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
}
.main-container > * {
background-color: #b5b5b5;
padding: 20px;
}
.header-section {
background-color: #5b5b5b;
grid-column: 1/13;
}
.main-section {
grid-column: 5/13;
grid-row: 2/4;
}
.aside-section {
grid-column: 1/5;
}
.nav-section {
grid-column: 1/5;
}
.section {
grid-column: 1/13;
grid-row: 4/6;
}
.footer-section {
background-color: #5b5b5b;
grid-column: 1/13;
}
</style>
</head>
<body>
<div class="main-container">
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</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">
<title>4.3-demo-custom-12-column-grid-framework.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
/* 4.3.2 custom 12 columner grid */
position: relative;
}
/* 4.3.2 custom columner grid */
#custom-grid-overlay-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100%, auto);
position: absolute;
width: 100%;
height: 100%;
background: transparent;
padding: 0;
margin: 0;
}
#custom-grid-overlay-container div {
opacity: 0.25;
border: 1px solid #ffffff;
}
/* */
.main-container > * {
background-color: #b5b5b5;
padding: 20px;
}
.header-section {
background-color: #5b5b5b;
grid-column: 1/13;
}
.main-section {
grid-column: 5/13;
grid-row: 2/4;
}
.aside-section {
grid-column: 1/5;
}
.nav-section {
grid-column: 1/5;
}
.section {
grid-column: 1/13;
grid-row: 4/6;
}
.footer-section {
background-color: #5b5b5b;
grid-column: 1/13;
}
</style>
</head>
<body>
<div class="main-container">
<!-- /* 4.3.2 custom 12 columner grid */ -->
<section id="custom-grid-overlay-container">
<div>Column <br/> 1</div>
<div>Column <br/> 2</div>
<div>Column <br/> 3</div>
<div>Column <br/> 4</div>
<div>Column <br/> 5</div>
<div>Column <br/> 6</div>
<div>Column <br/> 7</div>
<div>Column <br/> 8</div>
<div>Column <br/> 9</div>
<div>Column <br/> 10</div>
<div>Column <br/> 11</div>
<div>Column <br/> 12</div>
</section>
<!-- Basic layout -->
<header class="header-section"><h1>Header Section</h1></header>
<main class="main-section">Main Section</main>
<aside class="aside-section">Aside Section</aside>
<nav class="nav-section">Nav Section</nav>
<section class="section">Section Section</section>
<footer class="footer-section"><small>Footer Section</small></footer>
</div>
</body>
</html>
Syntax & Example:
4.4-demo-grid-auto-flow-dense.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">
<title>4.4-demo-grid-auto-flow-dense.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
color: #ffffff;
font-size: 1rem;
text-align: center;
}
.main-container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-gap: 10px;
/* 4.4.2 - */
/* grid-auto-flow: dense; */
}
.item:nth-child(6n) {
background-color:#a9a906;
/* 4.4.1 - right side every 6th column should cover span remaining space */
grid-column: span 5;
/* 4.4.2 - */
/* grid-column: span 6; */
}
.main-container > * {
background-color: #dcdc65;
padding: 20px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item11">11</div>
<div class="item item12">12</div>
<div class="item item13">13</div>
<div class="item item14">14</div>
<div class="item item15">15</div>
<div class="item item16">16</div>
<div class="item item17">17</div>
<div class="item item18">18</div>
<div class="item item19">19</div>
<div class="item item20">20</div>
<div class="item item21">21</div>
<div class="item item22">22</div>
<div class="item item23">23</div>
<div class="item item24">24</div>
<div class="item item25">25</div>
<div class="item item26">26</div>
<div class="item item27">27</div>
<div class="item item28">28</div>
<div class="item item29">29</div>
<div class="item item30">30</div>
<div class="item item31">31</div>
<div class="item item32">32</div>
<div class="item item33">33</div>
<div class="item item34">34</div>
<div class="item item35">35</div>
<div class="item item36">36</div>
<div class="item item37">37</div>
<div class="item item38">38</div>
<div class="item item39">39</div>
<div class="item item40">40</div>
<div class="item item41">41</div>
<div class="item item42">42</div>
<div class="item item43">43</div>
<div class="item item44">44</div>
<div class="item item45">45</div>
<div class="item item46">46</div>
<div class="item item47">47</div>
<div class="item item48">48</div>
<div class="item item49">49</div>
<div class="item item50">50</div>
<div class="item item51">51</div>
<div class="item item52">52</div>
<div class="item item53">53</div>
<div class="item item54">54</div>
<div class="item item55">55</div>
<div class="item item56">56</div>
<div class="item item57">57</div>
<div class="item item58">58</div>
<div class="item item59">59</div>
<div class="item item60">60</div>
</body>
</html>
.main-container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-gap: 10px;
/* 4.4.2 - */
grid-auto-flow: dense;
}
.item:nth-child(6n) {
background-color:#a9a906;
/* 4.4.1 - right side every 6th column should cover span remaining space */
/* grid-column: span 5; */
/* 4.4.2 - */
grid-column: span 6;
}
Syntax & Example:
4.5-demo-grid-card-layout.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">
<title>4.5-demo-grid-card-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
/* grid-auto-rows: minmax(300px, auto); */
grid-gap: 10px;
}
.card {
color: #000000;
border: 2px solid #000000;
font-size: 1rem;
padding: 1rem;
text-align: left;
}
.card .logo-holder{
background-color: #ffdab9;
height: 5em;
margin-bottom: 1em;
}
.card .header{
color: #ffb470;
font-size: 1.25em;
font-weight: bold;
margin-bottom: 0.5em;
}
.card .article{
color:#ddb470;
font-size: 0.75em;
}
.card2 .logo-holder{
height: 7em;
}
.card3 .logo-holder{
height: 9em;
}
.card4 .logo-holder{
height: 11em;
}
.card6 .logo-holder, .card7 .logo-holder{
height: 9em;
}
</style>
</head>
<body>
<div class="main-container">
<div class="card card1">
<section class="logo-holder"></section>
<header class="header">Card1 Heading</header>
<article class="article">
This is dummy teaser text.
</article>
</div>
<div class="card card2">
<section class="logo-holder"></section>
<header class="header">Card2 Headline Logo content</header>
<article class="article">
This is dummy teaser text. It may varies card to card.
</article>
</div>
<div class="card card3">
<section class="logo-holder"></section>
<header class="header">Card3 Heading</header>
<article class="article">
This is dummy teaser text. It may varies card to card. This is dummy teaser text.
</article>
</div>
<div class="card card4">
<section class="logo-holder"></section>
<header class="header">Card4 Heading</header>
<article class="article">
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
</article>
</div>
<div class="card card5">
<section class="logo-holder"></section>
<header class="header">Card5 Heading & Logo Wrapper</header>
<article class="article">
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
This is dummy teaser text.
</article>
</div>
<div class="card card6">
<section class="logo-holder"></section>
<header class="header">Card6 Heading</header>
<article class="article">
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
</article>
</div>
<div class="card card7">
<section class="logo-holder"></section>
<header class="header">Card7 Heading</header>
<article class="article">
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
This is dummy teaser text.
</article>
</div>
<div class="card card8"><section class="logo-holder"></section>
<header class="header">Card8 Heading</header>
<article class="article">
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
This is dummy teaser text. It may varies card to card.
</article>
</div>
</div>
</body>
</html>
Syntax & Example:
4.6-demo-grid-card-nested-layout.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">
<title>4.6-demo-grid-card-nested-layout.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.grid-layout-container {
width: 960px;
margin: 0 auto;
}
.main-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(165px, auto);
grid-gap: 10px;
}
.card {
display: grid;
grid-template-columns: repeat(1, 130px 1fr);
/* grid-auto-rows: minmax(300px, auto); */
grid-gap: 10px;
color: #000000;
font-size: 1rem;
padding: 1rem;
text-align: left;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
-ms-box-shadow: 0 2px 2px rgba(0,0,0,.075);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.075);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.075);
box-shadow: 0 2px 2px rgba(0,0,0,.075);
}
.card .header{
color:#428bca;
font-size: 1.25em;
margin-bottom: 0.5em;
font-weight: bold;
}
.card .article{
color:#666666;
font-size: 0.75em;
}
</style>
</head>
<body>
<div class="grid-layout-container">
<h1>Enable CSS Grid Layout</h1>
<p>CSS Grid Layout enabled different browser version:</p>
<div class="main-container">
<div class="card card1">
<section class="logo-holder">
<img src="../_images-css-grid/4.6-images/chrome.png" alt="chrome">
</section>
<section class="text-contaner">
<header class="header">Chrome</header>
<article class="article">
Enabled by default since version 57
</article>
</section>
</div>
<div class="card card2">
<section class="logo-holder">
<img src="../_images-css-grid/4.6-images/firefox.png" alt="firefox">
</section>
<section class="text-contaner">
<header class="header">Firefox</header>
<article class="article">
Enabled by default since version 52
</article>
</section>
</div>
<div class="card card3">
<section class="logo-holder">
<img src="../_images-css-grid/4.6-images/internet-explorer.png" alt="internet-explorer">
</section>
<section class="text-contaner">
<header class="header">Internet-Explorer</header>
<article class="article">
Enabled by default since IE10 (old syntax)
</article>
</section>
</div>
<div class="card card4">
<section class="logo-holder">
<img src="../_images-css-grid/4.6-images/opera.png" alt="opera">
</section>
<section class="text-contaner">
<header class="header">Opera</header>
<article class="article">
Enabled by default since version 44
</article>
</section>
</div>
<div class="card card5">
<section class="logo-holder">
<img src="../_images-css-grid/4.6-images/safari.png" alt="safari">
</section>
<section class="text-contaner">
<header class="header">Safari</header>
<article class="article">
Enabled by default since version 10.1
</article>
</section>
</div>
<div class="card card6">
<section class="logo-holder">
<img src="../_images-css-grid/4.6-images/epiphany.png" alt="epiphany">
</section>
<section class="text-contaner">
<header class="header">Epiphany</header>
<article class="article">
Enabled by default since version 3.24
</article>
</section>
</div>
</div>
</div>
</body>
</html>
Reference: - https://www.w3schools.com/css/css_grid.asp
Reference: - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Reference: - https://css-tricks.com/snippets/css/complete-guide-grid/
Reference: - https://tympanus.net/codrops/css_reference/grid/
Reference: - https://gridbyexample.com/what/
Reference: - https://learncssgrid.com/