CSS Grid – The most exciting thing to happen since CSS3

CSS Grid – The most exciting thing to happen since CSS3

Let’s take a quick look at the most exciting thing to come to front end web layout in a long time. That is the technology called CSS Grid.

The Problem & Solution:

Problem: Current tools for web layout are content-out and one-dimensional.
Solution: Two-dimensional layout-in tool to separate content from presentation.

Introduction to CSS Grid:

CSS Grid is the most exciting new way to create amazing layouts on the web. It’s not a framework or library, it’s just an addition to the CSS language that allows us to quickly create flexible, two-dimensional layouts. With the introduction of CSS Grid, we now have an independent layout mechanism which has a lot of cool benefits. Now we can write more resilient code without the help of any hacky tricks. In simple words, we can now do a lot many things with fewer lines of code.

Rather than having to deal with tables, flex boxes, floats, and positioning – we now have this amazing, two-dimensional layout mechanism, which allows us to control all aspects of our rows and columns, at the same time. Grid is one of the most powerful specifications that, when combined with other parts of CSS such as flexbox, can help you create layouts that were previously impossible to build using plain CSS.

The grid also gives us a flexible way to change the position of elements completely through CSS, without changing a single line in the HTML code. This can be used with media queries to alter the layout at different breakpoints.

CSS Grid Definition:

CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create two-dimensional complex responsive web design layouts more easily and consistently across browsers.

CSS Grid Terminology:

Grid container: Element containing a grid, defined by setting “display: grid;”. The first step to setting up your grid is to define your grid container. A grid container, houses and establishes your grid. The container sets the grid formatting context and manages how its direct child elements are spaced, sized, and aligned.

Grid item: Element that is a direct descendant of the grid container. Any element inside a grid container is considered a grid item.

Grid line: Horizontal (row) or vertical (column) line separating the grid into sections. Grid lines are referenced by number, starting and ending with the outer borders of the grid.

Grid cell: The intersection between a grid row and a grid column. Just the same as in an HTML table cell.

Grid track: The space between two or more adjacent grid lines. Row tracks are horizontal and column tracks are vertical.

Grid area: Rectangular area between four specified grid lines. Grid areas can cover one or even more cells.

Grid gap: A grid gap is an empty space between grid tracks (normally called gutters).

Advantages of CSS Grid

CSS Grid offers several advantages for web layout design, making it a powerful tool for creating responsive and complex layouts. Here are some key advantages of using CSS Grid:

  1. Two-Dimensional Layouts: CSS Grid allows for the creation of two-dimensional layouts, defining both rows and columns. This capability simplifies the structuring of content in a way that’s not easily achievable with traditional one-dimensional layouts.
  2. Alignment and Justification: Grid provides robust alignment and justification options. Items within the grid can be easily aligned both horizontally and vertically, giving precise control over the placement of elements within the layout.
  3. Responsive Design: CSS Grid is inherently responsive. You can use media queries along with grid properties to create layouts that adapt to different screen sizes and orientations. This flexibility is crucial for building websites that work well on various devices.
  4. Grid Lines and Gutters: Grid lines and gutters can be defined to create a well-organized structure. Grid lines make it easy to visualize and control the placement of items, and gutters allow for spacing between rows and columns.
  5. Implicit and Explicit Grids: With CSS Grid, you can define both implicit and explicit grids. Explicit grids are defined using properties like grid-template-rows and grid-template-columns, while implicit grids automatically accommodate additional items beyond the explicitly defined grid.
  6. Easy Nesting: Grids can be nested within one another, allowing for the creation of more complex layouts. This feature is especially useful when dealing with different sections of a webpage, each with its own grid structure.
  7. Fractional Units (fr): CSS Grid introduces fractional units (fr), which simplify the distribution of available space. Using fr units, you can allocate space to columns or rows proportionally, making it easier to create flexible and balanced layouts.
  8. Auto Placement: Grid can automatically place items in the grid, which can be particularly handy for creating responsive designs. The auto keyword can be used to let the browser automatically place items based on available space.
  9. Browser Support: CSS Grid is well-supported across modern browsers, making it a reliable and widely applicable solution for web layout design. It has become a standard feature, allowing developers to confidently adopt it in their projects.
  10. Simplified Code: Grid simplifies layout code by reducing the need for complex floats, positioning, or inline-block hacks. The concise and intuitive syntax of grid properties makes the code more readable and maintainable.

Overall, CSS Grid is a versatile layout system that streamlines the process of creating complex and responsive designs, offering a more efficient and powerful alternative to traditional layout methods.

Browser Support:

As of October 2017, Chrome, Firefox, Safari, and Edge all support CSS grid without vendor prefixes. IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera mini and UC browser. Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed.

Example

I have created a fiddle to showcase the CSS Grid capabilities in a nutshell. You can play around with it and learn more about the possibilities.

Further Reading

A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout – CSS: Cascading Style Sheets | MDN
Building Production-Ready CSS Grid Layouts Today
CSS Grid Layout – W3Schools

About The Author

Leave a Reply

Your email address will not be published. Required fields are marked *