How to build complex layouts using CSS Flexbox and Grid - Part 1 of 3

-Learn how CSS Flexbox and CSS Grid can be used to make portfolio layout and how a lot of hard problems can be solved easily using them. This is part 1/3 of the series in which you will learn to make complex layouts efficiently.

About us:
HackerEarth is the most comprehensive developer assessment software that helps companies to accurately measure the skills of developers during the recruiting process. More than 500 companies across the globe use HackerEarth to improve the quality of their engineering hires and reduce the time spent by recruiters on screening candidates. Over the years, we have also built a thriving community of 2.5M+ developers that come to HackerEarth to participate in hackathons and coding challenges to assess their skills and compete in the community.

[workingTchr]

Flexbox is nothing new now (2023), but this video was very helpful. Essentially you start from the outside and work inward. And to get it responsive, we basically switch between 'column' and 'row' as the flexbox direction of our containers.

[Elregar]

Dude, I learned more here than 3 months of school. Thank you.

[tsmspace]

Thank you so much, I'm a complete newb and following various youtube or udemy videos, but this video was very important for me, as so many videos jump past this material into bootstrap, . This is an excellent code-a-long, one of the best, most clear and explicit I've followed. I just wish I could review the code more easily than wiping the video slider.

[heckyes]

Grid reminds me a lot of my beloved <table>. I might actually get back into front end now.

[hansschenker]

Very straight forward sample for flexbox layout!

[knitelite]

Discovered an issue when trying to follow this tutorial on Codepen. Since you have a CSS style sheet and a Flexbox style sheet separately, it doesn't affect .pf-grid-item:last-child bottom margin. Had me stumped for quite a while. Other than that this is a lovely tutorial. Thank you for your time.

[ilonkaivanova]

This video is amazing!!! Thank you very very much! Flex is no more a mistery for the ones who were still floating ;)...

[r.j.schodowski]

This is very helpful, thank you! Just wondering, is there a repository with the files you use so we can practice along with you? Thanks again.

[vincesanchez]

Very helpful video this man is a gem :)

[MaxPicAxe]

I've been trying to find out how to make a portfolio with fixed sidebar in css grid layout! I really hope this tutorial gives me the solution...

[sumahassan]

hi
thanks a lot to make to understand how to make complex layout but can you teach us full cose of web development

[josemaesgm]

Excellent video, gran vídeo muchas gracias

[JamesTaylor-vxvu]

Hey, is there any reason in particular that you decided to use "flex-wrap: wrap" to align the grid items vertically instead of setting the flex-direction to column?

[jared]

Excellent video, where can we find parts 2 and 3? Thanks!

[dnahomeremodelingandrepair]

You had 2 div's named pf-content, one was the outer-wrapper and one was also named pf-content within the container. Later you have the outer-wrapper renamed pf-container, am I correct or missing something?

[tedshapera]

Great Video, but I'm stuck! I've checked my pf-flex.css over and over but it just won't do the sidebar on the right at >900px. Have I just gone code blind? In Dev Tools it shows the "flex: 35vw;" at > 900px but its not displaying it! Apologies in advance if its something obvious!

@media only screen and (min-width: 901px) {
.pf-sidebar {
flex: 35vw;
}

.pf-content {
flex: 65vw;
}

.pf-grid {
display: flex;
flex-wrap: wrap;
}
}

[andrescramosm]

what is the difference in using vw units or percetange values?

[shashwatasati]

Powerful videos by you.
Can I know your name and contact?

[poorvajanbandhu]

The reason why I :thumbsdown: this video is because 1) I don't care about how you set up your local environment to serve up files 2) I don't care about prettifying my view with font families, line heights and font colors and all that jazz. 3) There is so much moving around, you lose track.

Your content might be all great and from the end result that you're trying to achieve, I can tell that this video tutorial will be immensely helpful. But I have been watching multiple tutorials back to back to learn the various difference nuances of the grid layout, and I can safely say that in the time that you type out all your CSS and move things around, I may have learnt 3 new grid concepts in another tutorial.

I don't mean offense and this is just genuine feedback :-)

[HarpreetSingh-czzh]

use emmet for dom creation so much faster