Hi everyone,
I’m working on my portfolio page. I’d like to add a grid layout for the different projects I’ve completed. I can’t seem to find a grid method that doesn’t mess with my stylesheet and create layout problems with my site. Bootstrap is the worst so far, others have changed fonts and never lined up on the page properly.
I dialed my site back to pre-grid status so you can get a good feel for what I have. The grid would go in the “think” section. The word “think” would stay where it is. The grid needs to be 3x3 with a blank spot in the middle.
Thanks for your help!
have you taken a look at using flexbox ? (native css)
best article/tutorial so far is flexbox
If you dont want to use flexbox, your only other choice (since you don’t want libs/frameworks) is to build the grid yourself in css or a css preprocessor like sass.
happy coding
1 Like
Thank you, I’ll take a look.
Flexbox works. Can also do this with fairly straightforward html/css, which I am a fan of.
Make a div with class=“bigBox” or something like that. Make within that div 9 (3x3=9) divs with class=“smallBox”
In css, define the height/width of bigBox by a set number of pixels. Also, set its display: inline-block (or, though I’m less well versed in flex, display: flex might also work for this purpose).
Then, define the height/width of the class smallBox as 33%. (You may also need to define position: relative) Since all those divs with class smallBox are children of bigBox, their height and width will be defined as a percentage of the number of pixels you used to define bigBox. Further, they will inherit the display property of their mama, bigBox, as inline-block. The first three smallBox divs will nicely fill up one row of bigBox. There won’t be room for the fourth smallBox on that line, so they will begin filling a second row, and so on until you have your 3x3 grid.
To make the center div blank, well, just don’t put anything into it. Also-- keep in mind that margins/padding/borders might mess with this. i.e. a 1% margin makes the total width of the smallBox div 34%, and 34x3===102, which then means only 2 divs per row.
Anyway, there’s some fairly basic html/css that solves the issue. That always seems better to me than introducing an outside resource like bootstrap, which I feel gets really ugly.
1 Like