What you Need To Know:-
Before you come to know about CSS grid system, just get this note. CSS is a feature that will be used with HTML that gives both Front-End Developers and users more control over how pages are styled and displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear.
Grid Layout Intro:-
The CSS Grid Layout module is a new feature that will change the way we create web layouts. This technology is not supported by major browsers yet, but it offers some good benefits. CSS Grid Layout is a two-dimensional grid-based layout system that focus to do nothing less than completely change the way or a layout we design grid-based user interfaces. CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance).
Browser Support for CSS Grid System :-
Getting started with Grid is easy. You just define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
| Chrome | Safari | Firefox | Opera | IE | Android | IOS |
|---|---|---|---|---|---|---|
| 29+ (Behind flag) | Not supported | 40+ (Behind flag) | 28+ (Behind flag) | 10+ (Old syntax) | Not supported | Not supported |
Calculating Grid Size :-
If a grid has four dimensions associated with it, called minimum width, preferred width then minimum height and last preferred height. We can assume them as the minimum and desired dimensions of the slot in isolation. i.e., if it wasn’t constrained by other slots in the same row or column.
By instance, for easy way to create 3col-Grid will be :
<divclass=”grid”>
<divclass=”grid-item”>Grid item</div>
<divclass=”grid-item”>Grid item</div>
<divclass=”grid-item”>Grid item</div>
</div>
Styling CSS :-
10 column grid using the div with a class of container :
.container {
width: 90%;margin: 0 auto 0 auto;display: grid;grid-template-columns: (col ) 4.25fr repeat(9, (gutter) 1fr (col) 4.25fr ) (gutter);grid-template-rows: auto repeat(5, 100px);}
Align-items :
Here is to align content inside the div.
.container{ align-items: start | end | center | stretch;}