{"id":22661,"date":"2020-07-15T13:37:56","date_gmt":"2020-07-15T13:37:56","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=22661"},"modified":"2020-07-15T13:37:56","modified_gmt":"2020-07-15T13:37:56","slug":"better-website-layouts-35-learning-resources-to-master-css-grid-and-flexbox","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/better-website-layouts-35-learning-resources-to-master-css-grid-and-flexbox\/","title":{"rendered":"Better Website Layouts: 35 Learning Resources to Master CSS Grid and Flexbox"},"content":{"rendered":"

CSS Grid and Flexbox have revolutionised what\u2019s possible in layout design on the web. Both offerings are far more powerful than any layout techniques that came before them. Each one enables you to create more inspiring and unusual site designs.<\/span><\/p>\n

In this article, we\u2019ve rounded up some of the best resources \u2013 from blog articles to tutorials \u2013 on both Grid and Flexbox to help you get the most out of them.\u00a0<\/span><\/p>\n

Best for: overviews and insight<\/span><\/h2>\n

Every Layout\u00a0<\/span><\/a><\/h3>\n

This resource, created by <\/span>Heydon Pickering<\/span><\/a> and <\/span>Andy Bell<\/span><\/a>, teaches you how to better harness the built-in algorithms that power browsers and CSS. Tips on using Flexbox and Grid are threaded throughout the site.\u00a0<\/span><\/p>\n

Exciting Things on the Horizon For CSS Layout<\/span><\/a><\/h3>\n

In this blog, Michelle Barker presents an overview of some exciting things that could have a big impact on CSS layout in the very near future, including Masonry-style layouts in Firefox (see below) and Chrome support for the <\/span>gap<\/span><\/em> CSS property in Flexbox.<\/span><\/p>\n

Grid for Layout, Flexbox for Components<\/span><\/a><\/h3>\n

In this article, Ahmad Shadeed, an independent product designer and front-end developer from Palestine, explains the differences between CSS Grid and Flexbox, looks into how to decide which to use and how to combine both modules, and presents use cases and examples.\u00a0<\/span><\/p>\n

Learn Box Alignment<\/span><\/a><\/h3>\n

Also by Ahmad Shadeed, this article \u2013 which comes with interactive demos \u2013 walks you through box alignment and how it works with both CSS Grid and Flexbox. The premise is that you have a table and four plates. You\u2019ll learn how to align the plates differently using both layout methods.\u00a0<\/span><\/p>\n

A Guide to CSS Grids for Designers: Flexbox, CSS Grid, Floats & Clears<\/span><\/a><\/h3>\n

A nice little overview of the history of CSS layouts and what you can do with Flexbox and CSS Grid. Each grid option has its perks, and you don\u2019t have to be restricted to just one. In most cases, mixing and matching techniques will provide the best results.<\/span><\/p>\n

CSS Grid techniques<\/span><\/h2>\n

Making a Responsive CSS Grid Layout With Just 3 Properties<\/span><\/a><\/h3>\n

You only need to know three CSS properties to make a fully responsive template based on CSS Grid, as this article by software engineer Daniel Nastase proves.<\/span><\/p>\n

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs<\/span><\/a><\/h3>\n

A good companion piece to the above article, this one covers the smallest possible set of grid properties you need to know to meet most of your layout needs. The properties discussed are <\/span>display<\/span><\/em> (for the <\/span>grid<\/span> value), <\/span>grid-template-columns<\/span><\/em>, <\/span>grid-gap<\/span><\/em>, <\/span>grid-auto-flow<\/span><\/em> and <\/span>grid-column<\/span> \/ <\/span>grid-row<\/span><\/em>.<\/span><\/p>\n

Understanding CSS Grid: Creating A Grid Container<\/span><\/a><\/h3>\n

This new series on Smashing Magazine, written by editor-in-chief Rachel Andrew, aims to take you from CSS Grid beginner to expert. The first part covers what happens when you create a grid container and the various properties that you can use on the parent element to control your grid.\u00a0<\/span><\/p>\n

Understanding CSS Grid: Grid Lines<\/span><\/a><\/h3>\n

In part 2, Rachel Andrew explains how to place items against grid lines by adding properties to the direct children of the grid container. Among other things, she covers the placement properties, how to use <\/span>grid-area<\/span><\/em> to place by line number, and how to place items according to line name.<\/span><\/p>\n

Understanding CSS Grid: Grid Template Areas<\/span><\/a><\/h3>\n

In the final part of her series on the CSS Grid Layout spec, Rachel Andrew explores how to use the <\/span>grid-template-areas<\/span><\/em> property to define placement on the grid and find out how the property really works. Rachel says this method is a lovely way to experiment with layouts, and she often uses it when prototyping a layout.<\/span><\/p>\n

CSS Grid Template Areas In Action<\/span><\/a><\/h3>\n

Ahmad Shadeed explains how to put the <\/span>grid-template-areas<\/span> property to use and shares his insights. He includes use cases and demos, reusability and design systems, progressive enhancement and more.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

The Firefox DevTools have some great options for debugging CSS. For example, it shows the grid area names and a little representation of the <\/span><\/i>grid-template-areas<\/span><\/i> value in the bottom right corner.<\/span><\/i><\/p>\n

Flexible Layouts Without Media Queries<\/span><\/a><\/h3>\n

This article looks into how we can create flexible layout components with CSS Grid and math functions to gain more control over the hypothetical instructions we inscribe into our components.<\/span><\/p>\n

Constrained CSS Grids Without <\/span>max-width<\/span><\/a><\/h3>\n

Ethan Marcotte, who coined the term \u2018responsive web design\u2019, shares a little layout technique he\u2019s using in <\/span>this latest version of his site<\/span><\/a>. He explains how he uses CSS Grid \u2013 and in particular the empty space around his design \u2013 to create a layout that has a maximum width but can also conveniently be extended into a full-bleed layout when needed.<\/span><\/p>\n

Intrinsic Sizing In CSS<\/span><\/a><\/h3>\n

Ahmad Shadeed explores intrinsic sizing in CSS \u2013 including extrinsic sizing, min, max and fit content, browser support as well as use cases and examples \u2013 and explains how to use those values in combination with CSS Grid and other properties.<\/span><\/p>\n

Flexible Grids<\/span><\/a><\/h3>\n

This article is part of CSS Tricks\u2019 in-progress book of the best CSS tricks (to access it, you need to purchase <\/span>MVP Supporter<\/span><\/a>, or <\/span>log in<\/span><\/a> if you are a member). Chris Coyier explains how to make a column layout that doesn\u2019t declare the number of columns or rows, but automatically instead. Chris calls it \u201cthe most famous and useful code in all of CSS Grid\u201d.<\/span><\/p>\n

CSS Grid Layout Module Level 2: Masonry Layout<\/span><\/a><\/h3>\n

This tutorial explains how you can enable a Masonry layout \u2013 a grid layout based on columns, as popularized by Pinterest \u2013 in Firefox Nightly and also contains a CodePen that demonstrates how it works. For more information, see <\/span>Rachel Andrew\u2019s thoughts on the proposal<\/span><\/a> to add Masonry into the Grid specification, along with a demo and a request for readers to add their own comments on the CSS WG thread.<\/span><\/p>\n

CSS Grid Projects<\/span><\/h2>\n

Flash Grid: Learn CSS Grid by Building a Grid System<\/span><\/a><\/h3>\n

Join Sebastiano Guerriero in building a lightweight grid system and deepen your understanding of CSS Grid. The article touches on the main CSS Grid properties, and includes some practical tricks to get the most out of this powerful layout system.<\/span><\/p>\n

New Year, New Job? Let\u2019s Make a Grid-Powered Resume!<\/span><\/a><\/h3>\n

Developer Ali Churcher explores how to use CSS Grid to create a layout for a CV that looks great when printed out at different screen sizes, just in case an employer or client needs a physical copy, too.<\/span><\/p>\n

Building My Bullet Journal Layout With CSS Grid & Subgrid & Flexbox<\/span><\/a><\/h3>\n

Visual designer and front-end developer Stephanie Stimac explains how she built her <\/span>bullet journal demo<\/span><\/a>, which she uses to track a few monthly goals, bills, her weekly tasks and her schedule. As subgrid isn\u2019t supported in all browsers yet, she redefines the template columns from the parent grid.<\/span><\/p>\n

Crafting a Cutout Collage Layout with CSS Grid and Clip-path<\/span><\/a><\/h3>\n

This article explains how you can use CSS Grid, Flexbox and clip-path to code up an accessible and responsive layout featuring a subtle parallax scroll effect (made possible with just one line of JavaScript!).\u00a0<\/span><\/p>\n

A CSS Grid Framework for Shopify Collection Pages<\/span><\/a><\/h3>\n

All of the pages of a Shopify store can adopt CSS Grid, but one that can benefit the most from a robust and clean grid layout is the collection page. This article goes over how to set up a grid layout for products on your collection pages, and how to use Shopify’s section settings to create customizable options in the online store editor.\u00a0<\/span><\/p>\n

How to Stack Elements in CSS<\/span><\/a><\/h3>\n

Sarah Drasner explains that you can use <\/span>display: grid<\/em>;<\/span> to stack elements without setting any absolute positioning. She demonstrates two different ways \u2013 one with the position property and one with CSS Grid \u2013 you can use if you need two elements to overlap or exist in the same place, or may even just need them to be positioned near or next to each other.\u00a0<\/span><\/p>\n

Overlapping Header with CSS Grid<\/span><\/a><\/h3>\n

In this article, Jonathan Snook, who\u2019s been <\/span>playing with CSS Grid<\/span><\/a> (check out his clever use of nth-child), explains how he made the header in his design overlap the content with CSS Grid. No need to use negative margins anymore, you can now achieve this effect with CSS Grid.\u00a0<\/span><\/p>\n

Flexbox<\/span><\/h2>\n

4 CSS Layouts Without Using Media Queries<\/span><\/a><\/h3>\n

Inspired by a tweet that showed how just 13 lines of CSS can give you four separate layouts, this post demonstrates that thanks to Flexbox it\u2019s possible to make responsive layouts without having to define fixed breakpoints with media queries.\u00a0<\/span><\/p>\n

Centering Things with CSS Flexbox<\/span><\/a><\/h3>\n

Especially useful for beginners, this article (with accompanying screencast), covers centering horizontally and vertically with Flexbox as well as spacing to the left and right.\u00a0<\/span><\/p>\n

https:\/\/youtu.be\/KMvB08yNqlI<\/p>\n

Flexbox and Absolute Positioning<\/span><\/a><\/h3>\n

Chen Hui Jing looks at what happens when you absolutely position a flex item and talks about a related bug in Firefox\u2019s developer tools.\u00a0<\/span><\/p>\n

Safe\/Unsafe Alignment in CSS Flexbox<\/span><\/a><\/h3>\n

Learn how safe alignment can prevent data loss in CSS Flexbox layouts.<\/span><\/p>\n

Demos<\/span><\/h2>\n

Responsive CSS Grid \u2013 Books<\/span><\/a><\/h3>\n

A “product grid” demo by Andy Barefoot using CSS Grid, clip-path, Conic Gradient, Lea Verou’s <\/span>CSS conic-gradient() polyfill<\/span><\/a> and a <\/span>colour palette taken from Jay Fletcher’s work on Dribbble<\/span><\/a>.<\/span><\/p>\n

CSS Grid: Cross Stitch<\/span><\/a><\/h3>\n

Olivia Ng used 1060 divs to create a stunning, grid-based illustration. Recommended if you like to test your patience.<\/span><\/p>\n

Flexbox Responsive Form<\/span><\/a><\/h3>\n

Adam Argyle created this responsive form with four potential layouts that is powered by Flexbox.<\/span><\/p>\n

CSS Mondrian<\/span><\/a><\/h3>\n

Piet Mondrian-style art using CSS Grid made by Adam Fuhrer.<\/span><\/p>\n

\"\"<\/p>\n

Video tutorials<\/span><\/h2>\n

A Grid of Squares<\/span><\/a><\/h3>\n

In this video (and <\/span>tutorial<\/span><\/a>), Chris Coyier of CSS-Tricks and CodePen fame, uses CSS Grid to build a literal grid of squares with some logos centred inside each square. You\u2019ll learn a nifty trick to ensure the grid items maintain an aspect ratio, as well as how to use <\/span>object-fit<\/span><\/i> and absolute positioning.<\/span><\/p>\n