Skip to content

Instantly share code, notes, and snippets.

@josephshambrook

josephshambrook/simplest-gutter-grid.css

Last active November 27, 2019 12:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save josephshambrook/b607967c16cef296812b972cf7dfc437 to your computer and use it in GitHub Desktop.
Save josephshambrook/b607967c16cef296812b972cf7dfc437 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
simplest-gutter-grid.css
.g {
--main-width: 100%;
display: grid;
grid-template-columns:
minmax(1rem, 1fr)
minmax(auto, var(--main-width))
minmax(1rem, 1fr);
}
.g > * {
grid-column: 2 / 3;
}
@media screen and (min-width: 47rem) {
main {
--main-width: 45rem;
}
}
@josephshambrook
Copy link
Author

josephshambrook commented Nov 21, 2019 •
edited

SCSS version:

.g {
  --main-width: 100%;
  
  display: grid;
  grid-template-columns:
      minmax(1rem, 1fr)
      minmax(auto, var(--main-width))
      minmax(1rem, 1fr);

  > * {
    grid-column: 2 / 3;
  }

  @media screen and (min-width: 47rem) {
    --main-width: 45rem;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment