Grow your CSS skills. Land your dream job.

Question about CSS Grid

  • # November 10, 2012 at 8:58 am

    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??

    # November 10, 2012 at 12:19 pm

    Not sure if I quite understand what you asking, but I’ll try.
    Its’ simple with fixed layout grids. Not so simple with liquid layout using percentages like so: Each of your col1 in you example would be 6.25% .col2 twice the .col1, .col3 three times the .col1 and so forth. The percentages are based on the 100% width of the view port size. Now you obviously need some gutter (margin) between columns so the width of your columns will be less. Now getting back to your question. If your header text will fit in .col2 you use that div class. But there is a problem with liquid layout. What might work for you in let’s say resolution of 1280 width will brake in 1024 width and text of the header will wrap, unless you using media queries to handle font size or behavior of your divs. by setting them as display block at certain width.

    I don’t have yet enough experience with % dimensioned layouts so for now, I feel much more comfortable using grids set in px used within fixed width layout.

    # November 10, 2012 at 1:13 pm

    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: http://css-tricks.com/dont-overthink-it-grids/

    # November 10, 2012 at 3:01 pm

    @Paulie_D. I have spent considerable amount of time lately on learning responsive design and I think I’d be able to pull it off to redo my existing fixed based site. But what prevents me from doing so is the enormous amount of tabular data I have to use to present information. Well over half pages have some kind of tabular data and some of them require full 800 px width for it look right without having content of table cells wrapped or looking all convoluted like phone numbers. Sometimes I think to scale it down and leave all those pages with tabular data out for hand held devices. I don’t know, I am just confused about that.

    Can you shed some light on that or give some advice please?

    # November 10, 2012 at 6:04 pm

    You might want to look at this: http://css-tricks.com/examples/ResponsiveTables/responsive.php

    # November 10, 2012 at 6:07 pm

    hmmm . . . very interesting, thanx

    # November 12, 2012 at 7:10 am

    you might also want to have a look at some of the big name frameworks that have grids built in and a good bit of documentation on how to implement them, theres twitter bootstrap and zurb foundation

    # November 12, 2012 at 7:55 am

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".