Page 185 - CSS

Chapter 28: Grid

Introduction

Grid layout is a new and powerful CSS layout system that allows to divide a web page content into
rows and columns in an easy way.

Remarks

CSS Grid Layout Module Level 1 is, as of 9 September 2016, a W3C Candidate
Recommendation. It is considered to be in the Testing stage (
https://www.w3.org/Style/CSS/current-work).

As of 3 July 2017, Microsoft's Internet Explorer 10 and 11 and Edge browsers only support an
older version of the specification using a vendor prefix.

Examples

Basic Example

Property Possible Values

display grid / inline-grid

The CSS Grid is defined as a display property. It applies to a parent element and its immediate
children only.

Consider the following markup:

<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>

The easiest way to define the markup structure above as a grid is to simply set its display property
to grid:

.container {
display: grid;
}

However, doing this will invariably cause all the child elements to collapse on top of one another.
This is because the children do not currently know how to position themselves within the grid. But
we can explicitly tell them.

https://riptutorial.com/ 163