Grow your CSS skills. Land your dream job.

Grid layout widths

  • # March 19, 2013 at 2:01 pm

    Hello!

    So I’m coding a grid layout for a website, but I can’t get the widths of them to fit the outside properly. What I want it to do is for the blocks to expand depending on content, so one has to be larger than the other.

    Here is how I’d like it to look: http://www.dropbox.com/s/tsd56uj1fwfw51x/HowItShouldLook.png

    But at the moment, it looks like this: http://www.dropbox.com/s/48gi773uj0s2vho/HowItLooks.png

    I use Brackets to code, and it shows the outlines of areas that you are coding, this is what it shows me when I click to edit the area: http://www.dropbox.com/s/2kmhiqen79kyamk/Highlight.png

    So as you can see they are overlapping, and not doing as they are told.

    My logic was to use a list, and just have that expand to where it needs to be depending on its content, but I am struggling to get them to, well, first of all stay on the same line, and then to have them expand to the full width of the wrapper.

    Here is the HTML:

    • Turn it off, turn it all off!
    • Turn it off, turn it all off! Turn it off, turn it all off! Turn it off, turn it all off!
    • TURN IT OFF
    • Turn it off, turn it all off!

    And here is the CSS:

    .gridWrap
    {
    margin-top: -18px;
    color: pink;
    float: right;
    width: 728px;
    height: 100%;
    background-color: black;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .grid /* grid UL */
    {
    margin-bottom: 3px;
    margin-top: 0px;
    }

    .grid li
    {
    background-color: #444757;
    list-style: none;
    padding: 40px;
    margin-bottom: 3px;
    margin-left: -40px;
    float: left;
    }

    .grid li:nth-child(1) { }
    .grid li:nth-child(2) { background-color: #444757; margin-right: 3px;}
    .grid li:nth-child(3) { background-color: #444757; margin-right: 3px;}
    .grid li:nth-child(4) { }

    At the moment I am only using the “nth-child” values to highlight each different li to see how they are reacting, I’m not intending for them to impact my code in any way for the final version.

    # March 25, 2013 at 8:01 am

    Without using flexbox I don’t think think your aim is possible with pure CSS*.

    You seem to want the box elements to either fit their contents **or** be wide enough to fit the remainder of the width of the ‘row’….but you don’t want to set widths at all.

    The closest think I can think of is to use `display:inline-block`rather than floats.

    See: **http://codepen.io/Paulie-D/pen/yJBLC**

    I’ve set the wrapper to 50% so the whole think is responsive but a fixed pixel width will work if that’s what you want.

    Otherwise, a JS solution would be required.

    *Of course now someone will come along an prove me wrong.

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

You must be logged in to reply to this topic.

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