CSS Grid: First Look
Publeished date :03/2016
Manufacturer : lynda
Website: lynda.com
Author: Morten Rand-Hendriksen
Duration: 1;07
Type : Video lesson
English language
Download : Torrent Files Not available
Description: The CSS Grid Layout module (CSS Grid for short) will change the way we create web layouts in the future. The technology isn't supported by major browsers yet, but it offers some tantalizing benefits. CSS Grid provides a pure CSS method for laying out content in a two-dimensional grid—avoiding cross-browser compatibility issues and complicated markup. Your grid-based layouts can adapt responsively to a variety of screen sizes, and are quick and easy to code.
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
Introduction
Welcome
What to know before you start this course
1. CSS Grid: An Introduction
What is CSS grid?
When can we start using CSS grid?
2. CSS Grid: The Basics
CSS grid terminology
How to use the experimental CSS grid features in Chrome
How to use the CSS grid playground
Set up a CSS grid
Create rows and columns
How implicit lines work
Position content in cells
Make content span multiple cells
Get to know the fr unit
A simpler way to draw grid lines with math
A word on gutters
3. Named Lines and Template Areas
Create named lines
How to place content using named lines
Custom grid areas
How to use template areas
4. Grid in Practice
Responsive grid layout with content repositioning
Advanced responsive magazine layout
The importance of semantic markup
5. Going Further
Simple 3-column layout