- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hope you’re having a great day!
I’m getting back into the CSS game and was perplexed by CSS grids. When I learned web design we were taught to always make our own grids, avoid loads of divs etc.
Let’s say I use CSS generator that gives me a 16 column layout with all the divs and good stuff.
How in the world do I position, say, a header or content that spans two columns??
Grid systems…whether pre-set or self-rolled are pretty easy once you understand them.
There are no set columns that restrict you just that each class sets a specific width. They all float (usually) so if you need an element that’s 1/4 the width of the space you would usually give it a class of .col4 (where 4 = 4/16).
This means that you can have a div next to it that is no more than 12/16 wide. (.col12?)
This works with either set pixel widths for the base ‘column’ widths or %.
This might help: https://css-tricks.com/dont-overthink-it-grids/
You might want to look at this: https://css-tricks.com/examples/ResponsiveTables/responsive.php
Once you know the basics of how grid systems work I have found that rolling your own like Chris does is the way to go.