CSS grid is quickly becoming a web design standard, and has been adopted by Apple for grid-based layouts and galleries, by Slack for their user interface, and by Webflow for the Style panel and other interface components.

In this lesson, we’ll cover all the details related to CSS grid in practical, real-world examples that are only slightly contrived. Will grid change your world? Possibly. Will it create success in your personal and business relationships? Absolutely.

There’s a reason CSS grid is being adopted so rapidly and by notable frontend developers and thought leaders like Jen Simmons of https://www.layout.land/ and Jennifer Lame, who, according to Grímur, used CSS grid to edit the 2020 Christopher Nolan blockbuster, “Tenet” (in select theaters now).

In this lesson, we’ll cover CSS grid in six parts:

00:00 – Prologue
01:11 – Create and configure a grid
05:09 – The magical Div block
06:46 – Auto position (using an image grid)
10:54 – Manual position and overlapping (using a hero section)
16:01 – Reusable layouts (using grid template areas)
17:49 – Grids and responsive design (using breakpoints)
20:03 – Hedwig’s Theme

Learn more about CSS grid on Webflow University: https://university.webflow.com

———-
Get started with Webflow: https://wfl.io/2r7cVUW

https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

source

44 Comments

  2. Guys, does anybody know why at 9:15 all the images become the same size, when 100% width and height are different for each image?
    My images all stay elongated, not square. and they take the height of the longest image in each row.
    It's like NMW the first image takes fills the whole slot, and then others have to adjust to its dimensions.

  3. After all of this I have but one question: Why did I not hear Hedwig's theme? And what was the intro music credit? This are important questions and despite understanding grids, my webflow powers don't seem to be of use when attempting to understand with these great mysteries. But that was an overview of my questions.

  7. I am trying to make the image span into horizontal but it's not working. Body kept as usual > Added Section > Made it Grid as shown in the tutorial > Added an image > Made it 100% H&W and Fill is Cover > Then drag the image to the next column and not working. It take the whole viewport height and weight (100%vh & vw)

  11. hi, i have problems. i have follow all the instruction but after i set the 100% height and weight then set my image content to fit cover, it gets rectangle instead of square image. where is the problem and how i can fix this?

  12. Like parenting, but not at all. I love this guy's humor. Such a dope way to present, mixing really actionable useful information with enough jokes to keep it light hearted. Kudos

  16. When i span one image from the horizontal line to two compartments, it expands and increases at a 1:1 ratio, so how do you do it so that it only increases horizontally? The image doubles at a 1:1 ratio.

  18. If I woke up every morning to work on hilarious tutorials for a chill outfit like Webflow, while learning how to be a better dev?! I'd die happy. I'm applying. Fck it.

  22. The student becomes the teacher! I feel like Webflow got their talent from Adobe, but with a sidenote – daring to be funny and personal. Love Webflow already

  29. Help please… on the minute 9:45 they say that if you remove the height of the grid element the grid will contract but in my case when i remove the height from the grid the grid itself expand until fit to the image size (instead of contract like the video says, the grid expand – height and width) in other words the height of the grid takes the full size of the image, even when the image (every image has the same class) has 100% height, 100% width and fit=cover. i did this exercise in several browser (safary, edge, chrome and each time i did carefully each step but i have the same result, when I remove the height from the grid it dosent contract (like if the height of the grid were 0px or close to that) by contrast it expand until fit to the size of the image (again each image has the same class with this values height=100% width=100% fit= cover… thank you very much for all your comments

  32. I'm not sure if something has changed with Webflow but the 3rd section doesn't work when I try to recreate it.
    Update: Found the solution.

    Settings to recreate:
    Align – center
    Justify – centre
    Width – 100%
    Height – 100%
    Fit – cover

    Setting the height of the grid messes it up.

  37. I'm currently having some trouble with a grid and was hoping someone would be able to help. The images in my grid keep pushing past its boundary, even though the grid has a set size and each image is 100% width and height and set to cover. My only current solution is just to set no overflow but that's not really ideal. Any solutions or ideas would be greatly appreciated!

Leave A Reply

Please enter your comment!
Please enter your name here