Better Containers

If you’re anything like me chances are you hate css libraries like bootstrap but love their containers.

I don’t actually hate bootstrap. But it appears that developers who use bootstrap know bootstrap, not css.

also, I’m very weird about containers and try to have the least amount of nested divs as possible, and constaintly trying to minigate my divs;

Cmon, I cant be the only one who wants vomit at the site of this

<div>
  <div>
    <div>
      <div>
        <div>
          <div>You gotta be kidding me</div>
        </div>
      </div>
    </div>
  </div>
</div>

Ok jokes aside lemme show you my current solution

.container {
  display: grid;
  grid-template-columns:
    minmax(1em, 1fr)
    [main-start] minmax(0, 60em) [main-end]
    minmax(1em, 1fr);
  width: 100%;

  > * {
    grid-column: main;
  }
}

That’s pretty cool and all but what if you wanted something like bootstraps container-fluid class?

Well, we would need to add couple things…

.container {
  display: grid;
  gap: 1em 0;
  grid-template-columns:
    [flush-start] 1em
    [fluid-start] minmax(1em, 1fr)
    [main-start] minmax(0, 60em) [main-end]
    minmax(1em, 1fr) [fluid-end]
    1em [flush-end];
  width: 100%;

  > * {
    grid-column: main;
  }
  .fluid {
    grid-column: fluid;
  }
  .flush {
    grid-column: flush;
  }
}

This already makes it better than bootstrap’s solution because now we can just create a container add .fluid or .flush to anything within and it will just work.

We can still make this a little better with some breakpoints

This final form of our container looks something like This

$sm: 540px;
$md: 720px;
$lg: 960px;
$xl: 1140px;

.container {
  display: grid;
  gap: 1em 0;
  grid-template-columns:
    [flush-start] 1em
    [fluid-start] minmax(0, 1fr)
    [main-start] minmax(0, $sm) [main-end]
    minmax(0, 1fr) [fluid-end]
    1em [flush-end];
  width: 100%;

  @media screen and (min-width: $md) {
    grid-template-columns:
      [flush-start] 1em
      [fluid-start] minmax(0, 1fr)
      [main-start] minmax(0, $md) [main-end]
      minmax(0, 1fr) [fluid-end]
      1em [flush-end];
  }

  @media screen and (min-width: $lg) {
    grid-template-columns:
      [flush-start] 1em
      [fluid-start] minmax(0, 1fr)
      [main-start] minmax(0, $lg) [main-end]
      minmax(0, 1fr) [fluid-end]
      1em [flush-end];
  }
  @media screen and (min-width: $xl) {
    grid-template-columns:
      [flush-start] 1em
      [fluid-start] minmax(0, 1fr)
      [main-start] minmax(0, $xl) [main-end]
      minmax(0, 1fr) [fluid-end]
      1em [flush-end];
  }

  > * {
    grid-column: main;
  }
  .fluid {
    grid-column: fluid;
  }
  .flush {
    grid-column: flush;
  }
}

Now our content width is based on our breakpoints