About the reference site for the project 'personal portfolio'

1

I followed the freecodecamp map and was working on one of the first projects ‘personal portfolio’. I am using the sample site https://codepen.io/freeCodeCamp/full/YqLyXB as a reference. I notice that the portfolio section uses a .grid style and it appears to be defined on a custom css, rather than from the bootstrap css. I am wondering if there are any similar grid style layout that I can use from an existing css, rather than having to define my own every time. I search bootstrap documentation but couldnt find any (or perhaps I don’t know what keyword to search due to my inexperience in front end dev). Any help on what existing libraries I can use to create a grid layout are appreciated.

2

You could define your own once, then reuse the same stylesheet for future projects. Basically every CSS framework and library out there has some sort of grid system baked in, though. Google “CSS grid library” and you’ll find lots. I’ve used Bulma recently and enjoyed it. In the case of the sample project, they’re not really writing a grid-like layout system, despite the name. The class grid just turns an element into a flexbox container which happens to be a good way to arrange fixed-size elements. You could totally do this yourself in just a few lines of CSS. Something like

.grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

It would probably need some tweaking, but that’s the gist.

3

Thanks for the reply. Flexbox seems to be a useful container. I will keep it in mind.