CSS Grid and the Future of Web Layouts
From the LinkedIn Learning course CSS: Advanced Layouts with Grid

CSS Grid and the Future of Web Layouts

Web layouts have always been broken; we've just refined how we break them. Until now. CSS Grid is a paradigm shift where web layouts are concerned, and to take advantage of this new layout module we have to rethink everything we think we know about web layouts.

In the spring of last year I created a First Look course for LinkedIn Learning and Lynda.com to showcase the possibilities of CSS Grid. At the end of that course I said CSS Grid would likely be production ready by the end of 2017. At the time people said I was being too optimistic. Turns out that optimism was warranted: If everything goes according to plan, all modern browsers will have full CSS Grid support by mid-October. That means CSS Grid is ready for production today. So, to get you started right I've created a brand new course called CSS: Advanced Layouts with Grid which shows you how to use CSS Grid to create various layouts, and I'm super excited to see where you'll take what you learn from it.

Why CSS Grid Matters

By their nature, HTML documents are just that: Documents. They start at the top and end at the bottom. Which means if we want to place one part of the document next to another part we have to identify the different parts and somehow place them within the available space, which on the web is the browser viewport. Traditionally we'd do this using tables (which are really for marking up tabular content), float (which is for allowing content to flow around an item in the view), and flex (which is for flexing the contents within a container to take advantage of the available space).

The problem with all these approaches is they work content-out: They are applied to individual items and change their positioning and/or relationship with the adjacent content. Table, float, and flex have no understanding of the overall layout of a view, and can only be used to create layouts by doing weird things like creating layout containers and using negative margins for positioning. Like I said, web layouts have always been broken, we've just internalized that brokenness as the cost of working on the web and learned to treat it as if it were the way it ought to be.

CSS Grid changes all of that. It introduces a layout-in approach to web layouts and allows us to treat any element within the view port as a proper layout area inside which we can position things exactly where we want them to appear. This is fundamentally different from how we've been creating web layouts up until this point, and requires a complete rethink of the entire web design and development process.

First of all, creating web layouts with CSS Grid is absurdly easy. In a generalized way it only requires two steps:

  1. Draw a custom grid.
  2. Place the items where you want them to appear within that grid.

That's really all there is to it. Gone (for the most part) are the days of wondering how changing the layout of one item will affect another or nesting containers within containers within containers to ensure sections of our layouts float and clear properly. Just draw your custom grid and place items where you want them to appear.

This opens a path to a new world of unexplored layout options for the web, and in my new course I take you on a journey through some of the most immediately practical applications.

Multi-column Grid Layouts

A grid is by definition an area divided into columns and rows so CSS Grid is an ideal tool to create multi-column layouts: Simply define your columns and place the grid items in the column or columns you want them to appear. The actual placement can be done by referring to each column using the column line numbers, by giving the column lines names and referring to them, or by defining grid areas and placing the items within those areas. Whichever path you choose to take, the result is the same: Your items are laid out in the grid without any CSS alchemy.

Grid Nesting

When talking about layout grids its easy to think about a singular grid controlling the entire layout of a view. CSS Grid has no such restriction. Any element (container) in a view can have its display property set to grid, and you can nest as many grids as you like inside one another to create truly dynamic layouts. In my grid-based layouts I typically have at least 3 grids working at the same time; one for the main layout, one for content structure, and one for laying out the main content of the current view. But three is not my limit. I've found that CSS Grid works exceptionally well for creating advanced card-based layouts, and here I'll typically create a grid for each individual card and then a larger grid to lay out all the cards. That may sound like a lot of work, but because CSS Grid is just plain old CSS it's surprisingly easy to implement: Create a rule, apply it to all cards using the same class.

Advanced Interactivity

CSS Grid also simplifies and uncomplicates things we've been doing (or at least tried to do) before. Case in point: Off-canvas navigation.

The principle is simple enough: Place a navigation panel outside the viewport edges, and slide it in when some interaction takes place. The challenge has always been doing this without requiring a huge mess of CSS and JavaScript. CSS Grid makes that possible. The key is to remember a grid has no maximum height or width. In other words we can create a grid that is wider than the browser viewport and slide it in and out of view as necessary. This opens the door to both slide-over and push-in off-canvas navigation using only CSS Grid and some very basic JavaScript.

CSS Grid Is Ready for Production

Any time a new web technology comes along, the adoption rate takes the shape of a lazy upwards curve with full adoption taking years. There are good reasons for this - backwards compatibility, learning curve, cost of refactoring old code, etc - but none of these should stop you from using CSS Grid today.

First of all, CSS Grid is supported in all major modern browsers (with Edge coming online October 17th):

Secondly, Rachel Andrew has published an exhaustive breakdown of CSS Grid fallbacks to ensure every visitor is served with well structured accessible content.

Third, and finally, there is no rule saying "all websites must look exactly the same on all browsers including old ones." In fact we've actively worked against that rule since the introduction of Responsive Web Design in 2010. To move the web forward we need to adopt and use new technologies, and CSS Grid is a revolutionary technology that not only improves our ability to create advanced accessible responsive layouts, but makes that process a lot easier. That means if you can, provide the mobile layout as fallback for older browsers and progressively enhance your layouts with CSS Grid for modern browsers, and if you have to provide a consistent experience, use the fallbacks provided by Rachel Andrew so you can safely serve up CSS Grid to modern browsers.

A year, or maybe two from now, this notion that CSS Grid requires fallbacks to older browsers will be a fleeting memory. Adopting and using CSS Grid today ensures your creations are ready for the near future when grid is the primary layout module for the web. So, go check out CSS: Advanced Layouts with Grid today and join me in exploring the future of web layouts with CSS Grid!

--

Morten Rand-Hendriksen is a Senior Staff Instructor at LinkedIn Learning and Lynda.com focussing on front-end web development and WordPress and a sessional instructor of Interaction Design at Emily Carr University of Art and Design.

Lars Morten Bek

Softwareudvikler | Go-specialist | Fullstack | Teknologi og Innovation

5 年

I Love CSS Grid, i wish it was there since i started developing websites in 2008. This is the best thing i've ever experienced

回复
Reza Bayat

Networking , Web developer and programmer , Android developer

7 年

Nice and Perfect??

回复
Tim Yonce

? IT Manager ? YouTube ?? Video Content Creator ? Corporate Videos ??? Podcast ?? Web Development ??

7 年

There is no rule saying "all websites must look exactly the same on all browsers including old ones."

回复
Jeen K.

Marketeer / Accountmanager

7 年
回复
Tarun Juluru

Independent Freelance Designer ? Product + UX + UI ? Open for next impact-driven opportunity ? Ex: Tag-N-trac, Freight Tiger, f1studioz. ??????????

7 年

Excited to take the course.

回复

要查看或添加评论,请登录

Morten Rand-Hendriksen的更多文章

  • After WordPress

    After WordPress

    Today, the head of the WordPress Open Source Project Matt Mullenweg unilaterally locked the gates to wordpress.org, the…

    60 条评论
  • As the Mask Drops, It's Time to Face the Politics of Tech

    As the Mask Drops, It's Time to Face the Politics of Tech

    "Is it really?" She gestured at my hoodie and the bold text across my chest reading "Code is Political." "Profoundly…

    22 条评论
  • Rubicon

    Rubicon

    On Saturday October 12, 2024, a line was crossed in the WordPress open source project that I fear will have a lasting…

    24 条评论
  • As We Break Surface – The AI Transmutation of Web Dev

    As We Break Surface – The AI Transmutation of Web Dev

    "Hey AI, build me a website." It's a matter of time - probably months, before we get here.

    10 条评论
  • It’s time to abandon reckless oil propagandists

    It’s time to abandon reckless oil propagandists

    A response to Dan McTeague’s Financial Post opinion piece “It’s time to abandon reckless EV mandates” published July…

    13 条评论
  • AI Training and the Slow Poison of Opt-Out

    AI Training and the Slow Poison of Opt-Out

    Asking users to opt-out of AI training is a deceptive pattern. Governments and regulators must step in to enforce…

    7 条评论
  • GPT-4o, OpenAI, and Our Multimodal Future

    GPT-4o, OpenAI, and Our Multimodal Future

    OpenAI held up a big shining arrow pointing towards our possible future with AI and asked us to follow them. Beyond the…

    12 条评论
  • Ten Questions for Matt Mullenweg Re: Data Ownership and AI

    Ten Questions for Matt Mullenweg Re: Data Ownership and AI

    Dear Matt. 404 Media tells me you're in the process of selling access to the data I've published on WordPress.

    11 条评论
  • AI Coding Assistants Made Me Go Back to School

    AI Coding Assistants Made Me Go Back to School

    The introduction of graphing calculators didn't remove the need to understand math; they removed the need to do rote…

    13 条评论
  • The Challenge, and Opportunity, of OpenAI's GPT Store

    The Challenge, and Opportunity, of OpenAI's GPT Store

    If you make a useful GPT in the GPT Store, someone else will publish a more popular copy and make yours look like a…

    8 条评论

社区洞察

其他会员也浏览了