Hoffensoft Hoffensoft
contact@hoffensoft.com
Menu
  • Home
  • Practices
    • Cloud
      • Salesforce Solutions
      • ServiceNow
      • JIRA
      +
    • Analytics
    • Voice
    • Mobile
    • Open Source
    • Dev Ops
      • AWS
      • Google Cloud Platform
      • IBM Cloud
      • Azure Cloud
      +
    • Research and Development
    +
  • Success
  • About Us
  • Helping Hands
  • Blogs
  • Careers
  • Contact Us

CSS Grid Layout

HomeOpen SourceCSS Grid Layout
28 Aug

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).

grid template

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;}

 

admin

Open Source

Hoffensoft is a cloud services firm that specialises in delivering end-to-end enterprise solutions. We work closely with our clients to provide custom applications that empower them to derive the best out of their resources.

STAY CONNECTED


contact@hoffensoft.com 

Recent Posts

  • React Date Component December 24, 2019
  • React Collapse and carousel Component December 23, 2019
  • React Modal Popup Component December 23, 2019

Quick Links

  • Home
  • Success
  • About Us
  • Blog
  • Careers
  • Contact Us

Contact Us





© 2023 Hoffensoft.