How can the divs float underneath?

I’m trying to learn how to create my own grid system for all my snippet projects (portfolio). i came across this website CREATING YOUR OWN CSS GRID SYSTEM . The information was understandable to a certain point. I went ahead and utilized some if not all his code.


However, when i resize the window, the column divs simply resize themselves to fit the containers width. Now thats understandable but what happens if the content inside is can be shrinked? I want to be able to make the 1 row align itself vertically when it reaches a specific width.

Here is a picture of what the sass/html look like:

Any help is appreciated it!

PS: if anyone can explain the purpose of why the user used .row:before,.row:after from the tutorial website? I understand what before/after do but not in the context he/she created

Yes you need to ensure your content can also shrink/expand with the container otherwise the grid is broken. This means making images fluid and not using fixed widths.

You would do that by adding a media query at the appropriate point and changing the floats to float:none and then they become horizontal. The point you add the media query should depend on your design and not some pre-packaged grid concept that knows nothing about your design.

To be honest (from my point of view) grids are a waste of time especially floated grids as they have had their day. I never use floats for column content as there are far better options these days. e.g. display:table and table-cell or flexbox.

There seems to be no point in building a grid that has masses of code to do what could be done in a few seconds anyway and fits the design you are working with exactly.

I understand the use of bootstrap (other frameworks are available) where a team is working on a large project and consistency is the key but for a one man band approach a grid is a hindrance not a help. Just look through the forums and see how many people get stuck inside them and shout for help.:slight_smile:

I have used bootstrap at clients requests when working on a team but I never used the grid code at all as it was too fragile and too complex most of the time for what can easily be done by hand in a few seconds.

That should have been the first thing you learned when starting CSS in that floats are removed from the flow and that a parent that holds only floats in fact holds nothing and its height would be zero. The ‘clearfix’ hack (or the overflow method) are used to make the parent contain the child floats.

The clearfix hack (using:after) basically shims a pseudo element after the floats and before the closing tag of the .row element and then sets it to clear the floats exactly the same as if you had stuck an empty div after the floats and cleared it. Display:table is used (rather than block) in the clearfix to avoid margin-collapse.

5 Likes

Hey so i’ve created @media whether the max-width = 500px.
i’ve used the [class*=‘col’] to target all the classes with ‘col-’ in their prefix. ive set the float to none like you mentioned above but nothing happens. I decided to clear: both; instead and they stack under each other but the divs themselves do not stretch interiorly to 100% width. How can i do that? The images i demonstrated above are the same, ill add the @media portion.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>
  <body>
    <div id="container">
      <div class="row">
        <div class="col-1">h1</div>
      </div>
      <div class="row">
        <div class="col-2">h2</div>
        <div class="col-2">h2</div>
      </div>
      <div class="row">
        <div class="col-3">h3</div>
        <div class="col-3">h3</div>
        <div class="col-3">h3</div>
      </div>
      <div class="row">
        <div class="col-4">h4</div>
        <div class="col-4">h4</div>
        <div class="col-4">h4</div>
        <div class="col-4">h4</div>
      </div>
      <div class="row">
        <div class="col-5">h5</div>
        <div class="col-5">h5</div>
        <div class="col-5">h5</div>
        <div class="col-5">h5</div>
        <div class="col-5">h5</div>
      </div>
      <div class="row">
        <div class="col-6">h6</div>
        <div class="col-6">h6</div>
        <div class="col-6">h6</div>
        <div class="col-6">h6</div>
        <div class="col-6">h6</div>
        <div class="col-6">h6</div>
      </div>
      <div class="row">
        <div class="col-7">h7</div>
        <div class="col-7">h7</div>
        <div class="col-7">h7</div>
        <div class="col-7">h7</div>
        <div class="col-7">h7</div>
        <div class="col-7">h7</div>
        <div class="col-7">h7</div>
      </div>
      <div class="row">
        <div class="col-8">h8</div>
        <div class="col-8">h8</div>
        <div class="col-8">h8</div>
        <div class="col-8">h8</div>
        <div class="col-8">h8</div>
        <div class="col-8">h8</div>
        <div class="col-8">h8</div>
        <div class="col-8">h8</div>
      </div>
      <div class="row">
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
        <div class="col-9">h9</div>
      </div>
      <div class="row">
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
        <div class="col-10">h10</div>
      </div>
      <div class="row">
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
        <div class="col-11">h11</div>
      </div>
      <div class="row">
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
        <div class="col-12">h12</div>
      </div>
    </div>
  </body>
</html>

<!-- RESOURCES -->
<!-- http://j4n.co/blog/Creating-your-own-css-grid-system -->

$containerWidth: 100%;

html, body, div{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container{
  width: $containerWidth;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  background-color: grey;
  overflow:hidden;
  .row {
      overflow:hidden;
    [class*='col-']{
      float: left;
      min-height: 100px;
      width: $containerWidth / 12; /*default width, total of 12 columns*/
      background-color: rgba(52, 73, 94,1.0);
      border: 1px solid white;
      padding: 2px;
      overflow:hidden;
      text-align: center;
    }
    .col-1{
      width: $containerWidth / 1;
    }
    .col-2{
      width: $containerWidth / 2;
    }
    .col-3{
      width: $containerWidth / 3;
    }
    .col-4{
      width: $containerWidth / 4;
    }
    .col-5{
      width: $containerWidth / 5;
    }
    .col-6{
      width: $containerWidth / 6;
    }
    .col-7{
      width: $containerWidth / 7;
    }
    .col-8{
      width: $containerWidth / 8;
    }
    .col-9{
      width: $containerWidth / 9;
    }
    .col-10{
      width: $containerWidth / 10;
    }
    .col-11{
      width: $containerWidth / 11;
    }
    .col-12{
      width: $containerWidth / 12;
    }
  }
}

/*Responsive */
@media screen and (max-width: 500px){
    [class*='col-']{
        float: none;
    }
    .col-1{
      width: $containerWidth;
    }
    .col-2{
      width: $containerWidth;
    }
    .col-3{
      width: $containerWidth;
    }
    .col-4{
      width: $containerWidth;
    }
    .col-5{
      width: $containerWidth;
    }
}

JonathanVazquez, please post your code as text. We cannot copy and paste the code from the image.

To include code in a post, begin by typing three backticks on a line by themselves, then post your code, finally close the block by typing three more backticks on a line by themselves. Like this:

```
your code here
```

If you prefer, you can paste your code in the editor, highlight your code, then click the </> button in the editor’s menu bar to keep your formatting intact.

Thank you

PS: Nothing happens with the code in your screen shot because the JavaScript comment marks in your code appear as slashes in the CSS and corrupt the CSS. One must use valid CSS comment marks: /* */.

1 Like

i didn’t think i would need to insert it since its minimalistic code. I will be sure to include the actual code right now actually. As for the comment, yeah thats bad habit lol. Happens when your daily life revolves around C/C++ and you try using single-line comments :smiley:

I’ve removed them, thank you for the tip!

1 Like

The CSS in post #3 for #container{ is not valid CSS. It looks like uncompiled SASS or something. Could you replace it with compiled CSS, please. The uncompiled stuff doesn’t run in a browser.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.