Are you struggling with centering your elements in your layout? Do the responsive layouts break as soon as you make a small change? Are you still using floats?

If the answer to all of the above questions is a yes, then it is time to upgrade your CSS Skills.

There are a lot of tutorials to get you to understand Flexbox and Grid. In this guide, I will first list Flexbox courses and tutorials since a lot of concepts such as justify-content and align-items also exist in Grid.

Once you are more familiar with Flex, Grid gets easier to understand. Then, after getting through Grid, I will also be listing a few courses here to get you acquainted with using them both together to help you make better responsive websites.

Flexbox and Grid can do most of the heavy lifting when you are working on a project but sometimes, you would like certain elements to stick to the top (like a navbar) when you are scrolling the page or you would like to place an element at a specific place. This cannot be effectively accomplished with Flexbox and Grid, and that’s when Positioning comes into play. Therefore, I will be adding some tutorials on positioning elements as well.

I have personally been using Grid more often than Flexbox, since a Grid can provide the same functionality as Flexbox but it also provides more control over the contents.

Click on the shortcuts for more details:

• Top Picks
• What is a box model in CSS?
• Floats are dead. What’s next?
• Why You Should Trust Us
• Courses Overview
• How We Made Our Picks and Tested Them

Here are our top picks

Click to skip to the course details:

Related Guides

• Web Development
• JavaScript
• React
• CSS Animation
• GSAP

Recommended Guides

• C Programming
• Kotlin
• C#
• Flutter & Dart
• Swift

Trending Guides

• Drawing
• American Sign Language (ASL)
• SQL
• Programming
• AutoCAD

What is a box model in CSS?

Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items. (MDN Docs)

The box model consists of several components that work together to create the final layout of an element. These components include:

• The content: the main content, such as text or an image, that is displayed within the element
• The padding: the space between the content and the border, and it affects the overall size of the element by making it larger or smaller
• The border: a line that surrounds the element and separates it from other elements on the page
• The margin: the space outside the border, between the border of the element and the adjacent elements on the page. The margin affects the spacing of elements on the page by creating space around the element.

Understanding the box model is essential for building effective and well-designed web pages, as it plays a crucial role in determining the layout and spacing of elements on a page. Properly utilizing the box model, along with other CSS layout tools such as Flexbox and Grid, can result in clean and responsive web designs.

Floats are dead. What’s next?

In the early days of web design, the primary layout tool was the “float” property. Floats were originally intended for wrapping text around images, but developers quickly realized that they could also be used for layout. While floats were a huge improvement over previous methods, they had limitations and could be difficult to work with.

Flexbox was introduced as a layout mode in CSS3, offering a more modern and flexible solution. Flexbox made it easier to control the position and size of elements within a container and provided a more intuitive way of arranging items flexibly. It quickly became a popular tool for building responsive and flexible layouts.

Grid was introduced later, in CSS Grid Layout, as an even more powerful layout tool. Grid allowed developers to create complex two-dimensional layouts, making it easier to control the placement of elements in rows and columns. Grid also offered a more structured approach to layout design, which could lead to more efficient and maintainable code.

These more modern layout tools provide greater flexibility, performance, and accessibility, making it easier for developers to create complex and responsive designs for the web.

If you are not sure which layout tool to use, I would recommend this video by Kevin Powell.

A more comprehensive guide can be found in the Flexbox and Grid documentation in MDN Docs. If you would like to learn more about it with videos and interactive material continue reading.

Why You Should Trust Us

Class Central, a Tripadvisor for online education, has helped 80 million learners find their next course. We’ve been combing through online education for more than a decade to aggregate a catalog of 250,000 online courses and 250,000 reviews written by our users. And we’re online learners ourselves: combined, the Class Central team has completed over 400 online courses, including online degrees.

Courses Overview

• All of the courses require a basic knowledge of HTML/CSS
• All the courses listed in this article are free
• Most of the courses are suitable for CSS beginners.

Best Course for Understanding Flexbox with Real-Life Examples (Wes Bos)

The Flexbox.io course by Wes Bos is a comprehensive guide to learning CSS Flexbox. The course covers the basics of Flexbox and teaches you how to use this powerful layout tool to build responsive and flexible web designs.

The course is organized into easy-to-follow hands-on projects, starting with an introduction to Flexbox and its key concepts. You will learn how to use Flexbox to control the position and size of elements within a container, and how to build responsive designs that adapt to different screen sizes.

The course also covers advanced topics such as:

• Using Flexbox with CSS Grid
• Creating complex nested layouts
• Using Flexbox in conjunction with other layout tools such as media queries.

Wes Bos also offers a free course on learning the command line and Javascript with a lot of practicing for small projects.

Best Interactive Learning Course for Flexbox (codepip)

“Flexbox Froggy” by Codepip is a game-based learning platform that teaches the basics of CSS Flexbox in an interactive and fun way.

The course is suitable for beginners and experienced developers alike, and provides a gentle introduction to Flexbox without any prior knowledge required. It is also a great way to brush up on your Flexbox skills if you have used it before but would like to reinforce your understanding.

The course consists of a series of challenges that require you to use Flexbox properties to arrange frogs on a lily pad. Each challenge builds on the previous one, introducing new concepts and properties along the way. You will learn how to control the alignment and spacing of elements within a container, as well as how to create responsive designs that adjust to different screen sizes.

Best Flexbox Course with Illustrated Examples (Josh W Comeau)

The “Interactive Guide to Flexbox” by Josh W. Comeau is a comprehensive, yet accessible, introduction to CSS Flexbox. The guide provides an interactive and visual way of learning Flexbox, helping you to understand the concepts and properties through practical examples.

In this guide you’ll learn different aspects of Flexbox, starting with an overview of its key concepts and properties. You’ll learn:

• About the different layout modes available in Flexbox, such as row, column, and wrap
• How to control the position and size of elements within a container
• Advanced topics, such as using Flexbox for responsive designs
• How to create Grid-based layouts, and use Flexbox in conjunction with other layout tools such as media queries.

Best Flexbox Video Course (Scrimba)

The Flexbox tutorial playlist by Scrimba is a comprehensive video series that provides a step-by-step introduction to CSS Flexbox.

The tutorials cover a wide range of topics, from the basics of Flexbox to advanced usage, making it an ideal resource for both beginner and advanced users.

This course introduces the following Flexbox concepts:

• Layout modes, containers, and items
• Creating simple and complex layouts with Flexbox
• Controlling element position and size within a container
• Building responsive designs with Flexbox

Scrimba also has a Grid tutorial.

Best Comprehensive Course on CSS Grids (Wes Bos)

The playlist to learn CSS Grid by Wes Bos is a comprehensive video series that provides a step-by-step introduction to CSS Grid. The playlist covers a wide range of topics, from the basics of CSS Grid to advanced usage, making it an ideal resource for both beginner and advanced users.

In this course, you will:

• Learn CSS Grid concepts (containers, items, rows/columns)
• Use CSS Grid for simple and complex layouts
• Position, size, and space elements within a Grid
• Create responsive designs with CSS Grid.

Best Teaching Technique for CSS Grid (FollowAndrew)

I am personally a very big fan of Andrew’s teaching style. He starts by making blocks to make sense of the Grid and then puts the required information, which helps in understanding how things are affecting the layout much better.

In this course, you’ll learn:

• Key CSS Grid concepts including containers, items, rows, and columns
• How to use CSS Grid to create layouts, position elements, control element size and spacing, and make responsive designs.

Next, you can take his course on Grids for a responsive layout. He also explains the use of flex to create a nav bar here.

Also Great CSS Grid Tutorial (Net Ninja)

This is another tutorial from Net Ninja. The practical tutorial explains grids and then proceeds to explain them towards the end with examples.

In this course, you will:

• Understand the basics of Grids, including CSS Grid, columns, rows, grid lines, nested grids, aligning and justifying items
• Learn how to create a 12-column grid, mosaic layout, and grid areas
• Explore responsive grid examples.

I also recommend looking into this playlist for another responsive layout made using Grids. He also explains flex here.

Best Tutorial for Understanding CSS Grid Units and Minmax (LayoutLand)

The course gives you an overview of CSS Grid and its capabilities, making it a great starting point for those new to CSS Grid. These tutorials teach you how to use different CSS Grid units for more flexible designs. It also explains how to use white space to enhance the layout design. It also explains how you could use CSS Grid to create visually appealing designs with overlapping elements.

What you’ll learn:

• The basics of CSS Grid
• Expand into using flex and grid together to create layouts
• The use of gaps
• Use minmax to create responsive layouts.

Best Course for Clarifying SubGrid Usage in CSS (Kevin Powell)

SubGrid is a section in Grid layouts. The Box Model is all about boxes within boxes. SubGrids allow you to nest Grids within Grids.

In this course, you will learn the functionality of subGrids by creating a simple responsive layout using Grids and subGrids.

Once you have completed this tutorial, you can take these: Easy and More Consistent Layouts with SubGrid and You can’t do this without subGrid. Kevin also has collaborated with Alex Trost on this video to explore subGrids.

You can also check these practical tutorials to create a Mosaic Layout using CSS Grids and a Masonry Layout.

Best Course for Creating Responsive Designs with CSS Grid (Learnwebcode)

The course covers various techniques for centering elements within a Grid layout, as well as how to avoid the need for extra wrapper divs.

In this course, you will learn:

• Manual placement of elements within a Grid layout
• How to create complex and flexible Grid layouts using Grid areas
• How to create responsive Grid layouts without the need for media queries or breakpoints
• Creative ways to use CSS Grid to create unique and engaging designs.

You can find the basics covered for Flexbox and Grids here.

Best Course for Learning Both Grid and Flexbox with Practical Examples (Adam Argyle)

Both Grid and Flexbox are supposed to be used together depending on the layout requirements. Here is a video playlist showing how to use them both in projects.

You will learn to use both Flex and Grid and create some layouts. The course includes several hands-on projects:

• Building a timer app
• A responsive dashboard with statistics
• A media scroller carousel
• A mini insta-friends list.

Best Comprehensive Tutorial for Understanding CSS Positioning (FollowAndrew)

CSS Positioning Tutorial by Andrew is one of the most comprehensive tutorials to understand positioning.

Andrew’s positioning tutorial covers:

• Various CSS positioning types and their values: Relative, Absolute, Fixed, Sticky
• Explores the concepts of HTML document flow and how the position types affect it
• Discusses the stacking order of elements using z-index
• Includes live code samples to help users understand and practice the concepts covered in the syllabus.

Also Great CSS Positioning Tutorial with Simple Examples (Net Ninja)

This CSS Positioning Tutorial is a comprehensive playlist that covers the various types of CSS positioning.

In this tutorial, you’ll learn:

• Document flow
• Floating elements and clearing
• Floating and text columns
• Relative, absolute, and fixed positions
• Z-index and box model
• CSS positioning introduction
• Clipping content
• Live code samples.

You can also follow along this video tutorial to understand positioning by creating a Mario web page.

Best Course on Absolute and Relative Positioning with Grid Integration (Kevin Powell)

Once you have completed the above tutorials and want to simply understand the use of absolute positioning and relative positioning, I recommend looking into this video by Kevin Powell. He explains absolute positioning and relative positioning by making a layout by creating a credit card (front and back) and making sure they would be responsive as well.

Additional Resources

After completing the following material, you might want to get a cheat-sheet for Flex and Grid check out:

• Flexbox cheat-sheet
• GridbyExample
• Grid Sheet
• LearnCSSGrid (Jonathan Suh)
• Create a landing Page with Flexbox and Grid(egghead.io)
• Test Flexbox Rules
• Test Grid Rules

If you have more links that could help, please do not hesitate to mention them in the comments.

How We Made Our Picks and Tested Them

I built this guide following the now tried-and-tested methodology used in previous Best Courses Guides (you can find them all here). It involves a three-step process:

1. Research: I started by leveraging Class Central’s database. Then, I made a preliminary selection of 300+ courses by rating, reviews, and bookmarks.
2. Evaluate: I read through reviews on Class Central, Reddit, and course providers to understand what other learners thought about each course and combined it with my own experience as a learner.
3. Select: Well-made courses were picked if they presented valuable and engaging content and fit in a set of criteria: comprehensive curriculum, affordability, release date, ratings and enrollments.

Fabio revised the research and the latest version of this article.