[A Complete Guide to Grid]#Grid #CSS #Bootstrap #Layout #Design #UI

0 - Introduction.md

Original Article

CSS Grid Layout	CSS Flexbox Layout
2-dimensional system (handle both columns and rows)	largly a 1-dimensional system
apply CSS rules both to a parent element (Grid Container) + that elements' children (Grid Items)

Content

• Basic and Browser Support
• Important Terminology
• Grid Properties Table of Contents

1 - Basic and Browser Support.md

To get started :

1. define a container element as a grid
   • display: grid
2. set the column and row size
   • grid-template-columns and grid-template-rows
3. place its child elements into the grid
   • grid-column and grid-row

the source order of the grid items doesn't matter.

Your CSS can place them in any order :

For Example : Imaging defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS.

Figure - Browser Support for Grid Layou

2 - Important Terminology.md

Content :

• Grid Container
• Grid Item
• Grid Line
• Grid Track
• Grid Cell
• Grid Area

Grid Container

display: grid - the direct parent of all the grid items

In this example, container is the grid container.

# html

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid Item

The children (e.g. direct descendants) of the grid container.

Here, the item elements are grid elements, but sub-item isn't.

# html

<div class="container">
  <div class="item"></div> 
  <div class="item">
  	<p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

The dividing line that make up the structure of the grid.

• can be either vertical("column grid lines") / horizontal("row grid lines")
• reside on either side of a row or column

Here the yellow line is an example of a column grid line.

Grid Track

The space between two adjacent grid lines.

You can think them like the columns or rows of the grid.

Here's the grid track between the second and thid row grid lines.

Grid Cell

The space between two adjacent row and two adjacent column grid lines.

a single "unit" of the grid

Here's the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid Area

The total space surrounded by four grid lines.

A grid area = any number of grid cells

Here's the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

3 - Grid Properties Table of Contents.md

Properties for the Grid Container

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Properties for the Grid Items

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self