Skip to content

Instantly share code, notes, and snippets.

@Sergioamjr
Last active December 9, 2018 23:40
Show Gist options
  • Save Sergioamjr/4108f33c95210341c13e1d97ee35ba96 to your computer and use it in GitHub Desktop.
Save Sergioamjr/4108f33c95210341c13e1d97ee35ba96 to your computer and use it in GitHub Desktop.
Sistema de Grid com CSS Puro
.container {
margin: 0 auto; /* Centraliza o site na tela */
padding: 0 15px; /* Espaçamento na lateral */
max-width: 1200px; /* Largura máxima do container */
}
.grid {
display: flex;
flex-wrap: wrap;
margin: 0 -15px; /* Necessário para tirar o espaçamento na lateral do container e das grids */
}
.grid > div {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
}
.grid .xs-1-12 {
width: calc(1% / 12 * 100);
}
.grid .xs-2-12 {
width: calc(2% / 12 * 100);
}
.grid .xs-3-12 {
width: calc(3% / 12 * 100);
}
.grid .xs-4-12 {
width: calc(4% / 12 * 100);
}
.grid .xs-5-12 {
width: calc(5% / 12 * 100);
}
.grid .xs-6-12 {
width: calc(6% / 12 * 100);
}
.grid .xs-7-12 {
width: calc(7% / 12 * 100);
}
.grid .xs-8-12 {
width: calc(8% / 12 * 100);
}
.grid .xs-9-12 {
width: calc(9% / 12 * 100);
}
.grid .xs-10-12 {
width: calc(10% / 12 * 100);
}
.grid .xs-11-12 {
width: calc(11% / 12 * 100);
}
.grid .xs-12-12 {
width: calc(12% / 12 * 100);
}
@media screen and (min-width: 768px) {
.grid .sm-1-12 {
width: calc(1% / 12 * 100);
}
.grid .sm-2-12 {
width: calc(2% / 12 * 100);
}
.grid .sm-3-12 {
width: calc(3% / 12 * 100);
}
.grid .sm-4-12 {
width: calc(4% / 12 * 100);
}
.grid .sm-5-12 {
width: calc(5% / 12 * 100);
}
.grid .sm-6-12 {
width: calc(6% / 12 * 100);
}
.grid .sm-7-12 {
width: calc(7% / 12 * 100);
}
.grid .sm-8-12 {
width: calc(8% / 12 * 100);
}
.grid .sm-9-12 {
width: calc(9% / 12 * 100);
}
.grid .sm-10-12 {
width: calc(10% / 12 * 100);
}
.grid .sm-11-12 {
width: calc(11% / 12 * 100);
}
.grid .sm-12-12 {
width: calc(12% / 12 * 100);
}
}
@media screen and (min-width: 992px) {
.grid .md-1-12 {
width: calc(1% / 12 * 100);
}
.grid .md-2-12 {
width: calc(2% / 12 * 100);
}
.grid .md-3-12 {
width: calc(3% / 12 * 100);
}
.grid .md-4-12 {
width: calc(4% / 12 * 100);
}
.grid .md-5-12 {
width: calc(5% / 12 * 100);
}
.grid .md-6-12 {
width: calc(6% / 12 * 100);
}
.grid .md-7-12 {
width: calc(7% / 12 * 100);
}
.grid .md-8-12 {
width: calc(8% / 12 * 100);
}
.grid .md-9-12 {
width: calc(9% / 12 * 100);
}
.grid .md-10-12 {
width: calc(10% / 12 * 100);
}
.grid .md-11-12 {
width: calc(11% / 12 * 100);
}
.grid .md-12-12 {
width: calc(12% / 12 * 100);
}
}
@media screen and (min-width: 1200px) {
.grid .lg-1-12 {
width: calc(1% / 12 * 100);
}
.grid .lg-2-12 {
width: calc(2% / 12 * 100);
}
.grid .lg-3-12 {
width: calc(3% / 12 * 100);
}
.grid .lg-4-12 {
width: calc(4% / 12 * 100);
}
.grid .lg-5-12 {
width: calc(5% / 12 * 100);
}
.grid .lg-6-12 {
width: calc(6% / 12 * 100);
}
.grid .lg-7-12 {
width: calc(7% / 12 * 100);
}
.grid .lg-8-12 {
width: calc(8% / 12 * 100);
}
.grid .lg-9-12 {
width: calc(9% / 12 * 100);
}
.grid .lg-10-12 {
width: calc(10% / 12 * 100);
}
.grid .lg-11-12 {
width: calc(11% / 12 * 100);
}
.grid .lg-12-12 {
width: calc(12% / 12 * 100);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment