From the course: CSS: Variables and Fluid Layouts

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Applying calc() in a layout example

Applying calc() in a layout example - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

Applying calc() in a layout example

“

- [Instructor] Now that you have a sense of how Kelp works, let's apply it to an example. This is CodePen and this CodePen is available to you at the address that's on the screen here. You can go ahead and create an account, you can fork this and save your edits. If you don't want to create an account, and you don't want to fork the code, that's fine, you can just edit directly. It just means that your changes won't be saved. So what I have going on here as you can see, over here on the right side, is a four column layout. And I've built this using Flexbox. If you just take a quick peek at the CSS over here, the HTML and the CSS down here on the bottom, you can see exactly what I did here and where all the numbers come from. Totally obvious what I did, right? You totally get it. Well, if not then I'm going to need to explain this in a little bit more detail. And the big thing you might be wondering about…

Contents