Skip to content

Instantly share code, notes, and snippets.

@casprine
Last active February 1, 2019 23:36
Show Gist options
  • Save casprine/e0184117c1023e590f867d0f3054d8c4 to your computer and use it in GitHub Desktop.
Save casprine/e0184117c1023e590f867d0f3054d8c4 to your computer and use it in GitHub Desktop.
A dead simple grid system
// grid system
.grid-base,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.grid-1 > * {
width: 100%;
}
.grid-2 > * {
width: -webkit-calc(50% - 40px/2);
width: calc(50% - 40px / 2);
}
.grid-2 > *:nth-child(2n + 1) {
margin-right: 40px;
margin-top: 20px;
}
@media only screen and (max-width: 1070px) {
.block--related .grid-2 > * {
width: 100%;
}
.block--related .grid-2 > *:nth-child(2n + 1) {
margin-right: auto;
}
}
@media only screen and (max-width: 860px) {
.grid-2 > * {
width: 100%;
}
.grid-2 > *:nth-child(2n + 1) {
margin-right: auto;
}
}
.grid-3 > * {
width: -webkit-calc(33.33% - 2 * 40px/3);
width: calc(33.33% - 2 * 40px / 3);
margin: 20px 0;
}
.grid-3 > *:nth-child(3n + 2) {
margin-left: 40px;
margin-right: 40px;
}
@media only screen and (max-width: 1420px) {
.grid-3 > * {
width: -webkit-calc(50% - 40px/2);
width: calc(50% - 40px / 2);
}
.grid-3 > *:nth-child(3n + 2) {
margin-left: auto;
margin-right: auto;
}
.grid-3 > *:nth-child(2n + 1) {
margin-right: 40px;
}
}
@media only screen and (max-width: 740px) {
.grid-3 > * {
width: 100%;
}
.grid-3 > *:nth-child(2n + 1) {
margin-right: auto;
}
}
.grid-4 > * {
outline:1px solid red;
width: -webkit-calc(25% - 3 * 40px/4);
width: calc(25% - 3 * 40px / 4);
margin: 20px 0;
}
.grid-4 > *:nth-child(4n + 1),
.grid-4 > *:nth-child(4n + 2),
.grid-4 > *:nth-child(4n + 3) {
margin-right: 40px;
}
@media only screen and (max-width: 1120px) {
.grid-4 > * {
width: -webkit-calc(50% - 40px/2);
width: calc(50% - 40px / 2);
}
.grid-4 > *:nth-child(4n + 1),
.grid-4 > *:nth-child(4n + 2),
.grid-4 > *:nth-child(4n + 3) {
margin-right: 0;
}
.grid-4 > *:nth-child(2n + 1) {
margin-right: 40px;
}
}
@media only screen and (max-width: 460px) {
.grid-4 > * {
width: 100%;
}
.grid-4 > *:nth-child(2n + 1) {
margin-right: 0;
}
}
.grid-5 > * {
width: -webkit-calc(20% - 4 * 40px/5);
width: calc(20% - 4 * 40px / 5);
margin: 20px 0;
}
.grid-5 > *:nth-child(5n + 2),
.grid-5 > *:nth-child(5n + 4) {
margin-left: 40px;
margin-right: 40px;
}
@media only screen and (max-width: 980px) {
.grid-5 > * {
width: -webkit-calc(25% - 3 * 40px/4);
width: calc(25% - 3 * 40px / 4);
}
.grid-5 > *:nth-child(5n + 2),
.grid-5 > *:nth-child(5n + 4) {
margin-left: 0;
margin-right: 0;
}
.grid-5 > *:nth-child(4n + 1),
.grid-5 > *:nth-child(4n + 2),
.grid-5 > *:nth-child(4n + 3) {
margin-right: 40px;
}
}
@media only screen and (max-width: 760px) {
.grid-5 > * {
width: -webkit-calc(33.33% - 2 * 40px/3);
width: calc(33.33% - 2 * 40px / 3);
}
.grid-5 > *:nth-child(4n + 1),
.grid-5 > *:nth-child(4n + 2),
.grid-5 > *:nth-child(4n + 3) {
margin-right: 0;
}
.grid-5 > *:nth-child(3n + 2) {
margin-left: 40px;
margin-right: 40px;
}
}
@media only screen and (max-width: 540px) {
.grid-5 > * {
width: -webkit-calc(50% - 40px/2);
width: calc(50% - 40px / 2);
}
.grid-5 > *:nth-child(3n + 2) {
margin-left: 0;
margin-right: 0;
}
.grid-5 > *:nth-child(2n + 1) {
margin-right: 40px;
}
}
.grid-6 > * {
width: -webkit-calc(16.66% - 5 * 40px/6);
width: calc(16.66% - 5 * 40px / 6);
margin: 20px 0;
}
.grid-6 > *:nth-child(6n + 1),
.grid-6 > *:nth-child(6n + 2),
.grid-6 > *:nth-child(6n + 3),
.grid-6 > *:nth-child(6n + 4),
.grid-6 > *:nth-child(6n + 5) {
margin-right: 40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment