Flexbox and Grid

Now we’re ready to move on from the relatively simple CSS layout methods we’ve looked at so far, and can look at Flexbox and Grid, two modern CSS layout methods that allow us to create complex, flexible layouts for our content.

Flexbox

• Basic concepts of flexbox - MDN tutorial on Flexbox

• A complete guide to Flexbox - A complete guide to FlexBox

If the embed above does not work here is a link to the full version of the video

CSS Grid

• Basic concepts of grid - MDN tutorial on grids

• A complete guide to Grid - A complete guide to CSS Grid

If the embed above does not work here is a link to the full version of the video

Related Reading

• Using Media Queries For Responsive Design In 2018
• Flexbox the Animated Tutorial - a nice way of learning about different CSS-Flex properties
• Grid by Example - a useful site with examples of how to use CSS Grid

Code Examples

If the embed above does not work here is a link to the full version of the video

Please note: there's a better way to fix the grid layout at the end of this video - rather than tell the `nav` and the `aside` that they need to be in the first row, we could set the `grid-auto-flow` of the parent container to be `row-dense` and that would make the browser fill the earlier gaps in the existing row rather than add a new row.

There are a set of code examples that accompany this course showing the use of the fundamental HTML tags and CSS styles/rules that we look at. (Right click and open in a new window/tab) if you’re viewing this on Learning Central.

• Simple grid (without CSS-Grid) [Code: HTML] [Code: CSS] [Demo]
• Flexbox example [Code: HTML] [Code: CSS] [Demo]
• Responsive Flexbox example [Code: HTML] [Code: CSS] [Demo]
• Responsive CSS Grid example [Code: HTML] [Code: CSS] [Demo]