Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Grid layout widths

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #43503
    Wymer
    Member

    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: https://www.dropbox.com/s/tsd56uj1fwfw51x/HowItShouldLook.png

    But at the moment, it looks like this: https://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: https://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.

    #129612
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.