Skip to content

Instantly share code, notes, and snippets.

@Obooman
Last active July 15, 2016 09:23
Show Gist options
  • Save Obooman/162d50cb737911fc0e0bb7c22d5f6bd4 to your computer and use it in GitHub Desktop.
Save Obooman/162d50cb737911fc0e0bb7c22d5f6bd4 to your computer and use it in GitHub Desktop.
Grid system for flex layout needs.REALLY powerful.
.grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0
}
.grid-cell {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.grid-top {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.grid-bottom {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.grid-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.grid-justifyCenter {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.grid-cell-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start
}
.grid-cell-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end
}
.grid-cell-center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment