CSS grid is rapidly changing into an internet design commonplace, and has been adopted by Apple for grid-based layouts and galleries, by Slack for his or her person interface, and by Webflow for the Type panel and different interface elements.
On this lesson, we’ll cowl all the main points associated to CSS grid in sensible, real-world examples which might be solely barely contrived. Will grid change your world? Probably. Will it create success in your private and enterprise relationships? Completely.
There’s a cause CSS grid is being adopted so quickly and by notable frontend builders and thought leaders like Jen Simmons of https://www.structure.land/ and Jennifer Lame, who, in response to Grímur, used CSS grid to edit the 2020 Christopher Nolan blockbuster, “Tenet” (in choose theaters now).
On this lesson, we’ll cowl CSS grid in six elements:
00:00 – Prologue
01:11 – Create and configure a grid
05:09 – The magical Div block
06:46 – Auto place (utilizing a picture grid)
10:54 – Handbook place and overlapping (utilizing a hero part)
16:01 – Reusable layouts (utilizing grid template areas)
17:49 – Grids and responsive design (utilizing breakpoints)
20:03 – Hedwig’s Theme
Study extra about CSS grid on Webflow College: https://college.webflow.com
———-
Get began with Webflow: https://wfl.io/2r7cVUW
https://webflow.com
Tweets by webflow
https://fb.com/webflow
source
Oh Grimur! lol
I'm in love with your YT channel. You are so funny and professional at the same time. Amazing. One more thing – there are no YT ads which is very relaxing and I can be focused on the topic all the time. 😊
U r extremly funny my friend, and extremly helpfull. If all the teachers in the world are like you, we would have many many many Einsteins xD. Love your work.
Fantastic, mind blown. Thank you for this tutorial.
12:59 Guys, I have a question. Does anyone know what CTRL + DRAG actually do?
4:41 "No; they’re science. And also magic."
OMG!! This is getting out of control !!!
1:13 "ANYTHING can be a grid. Here’s a section. Click grid? Now you have a grid."
“The Grid. A digital frontier. I tried to picture clusters of information as they moved through the computer. What did they look like? Ships, motorcycles? Were the circuits like freeways? I kept dreaming of a world I thought I'd never see. And then, one day I got in…”
― Kevin Flynn
"You can get that child to do whatever you want. Like parenting. Except not at all." 😂😂😂
Thanks tho. This was super helpful.
Very true
can you please ansewer my issue ? how can make grid adjustment from destktop view to tablet and to mobile phone without losing the grid i had creat in desktop view, i mean for example text in grid change position to two row instead of 1 row ?
Dragging a text box to a div element in a grid cell without holding down the command key (on Mac) means bad things happen 🙂
Anybody else finds that Command+Drag does NOT enable manual positioning? I tried Shift+Drag too (says so in Webflow University) – neither works for me…?
this video was fucking lit
I don't see the manual position on mine
My grids are not responsive, I set the dimensions for my grids and everything
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.
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.
I've honestly never watched one of these without laughing out loud, they are so good! ANd super helpful, thank you.
At the beginning of the video where he is demonstrating the CSS grid what is software is he is using?
Grid and Flexbox will be the hardest journey on webflow to learn for me
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)
This doesn't help me for my baseline HTML programming, but it was funny as hell. So thank you, for the laughs.
SCARY QUESTION
Can you use Webflow to build web apps like Slack or ERP Systems?
PS: I am a fan of the faculty and the syllabus 🔥
1:30
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?
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
Love your sense of humor! 😀
I thoroughly enjoyed Hedwig's Theme, thank you very much.
Damn, these tutorials are so clear and easy. Thanks Webflow!
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.
There used to be a time when I was afraid of HTML and CSS. Now I'm absolutely terrified of having to click a hundred little boxes and number inputs…
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.
am in love with this godamn guy XD webflow community should definitelly statr to memes base of his jokes LITERARY
hahaha
I love how Webflow/this guy defines the images, texts and other stuff like Children.
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
Love this guy!!
@20:27
Hahaha “like parenting, but not at all”
But how can i fit the image to the cell and not the other way around?
Except its not lol
Using grid layouts is so much more intuitive and responsive than using a series of columns inside columns… lol
I start liking this platform! Interesting
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
this is technical SNL show.
He is the Professor we thought we were getting after University Open Day 😂😂.
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.