Skip to content

Instantly share code, notes, and snippets.

@Windastella
Created February 26, 2017 16:49
Show Gist options
  • Save Windastella/d433dc84a9eb745596b7d3bd8d68125c to your computer and use it in GitHub Desktop.
Save Windastella/d433dc84a9eb745596b7d3bd8d68125c to your computer and use it in GitHub Desktop.
Simple Grid Stylesheet using Flex
/*
GRID.CSS
Desc: Simple Grid Stylesheet
Author:Nik Mirza
Email: nik96mirza(at)gmail(dot)com
*/
html,body,div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
margin:0;
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
}
/* Rows and column */
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.row-wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.row-top {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.row-bottom {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.row-left {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.row-right {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.row-center-horizontal {
-webkit-justify-content: center;
justify-content: center;
}
.row-center-vertical {
-webkit-align-items: center;
align-items: center;
}
.column {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.grid-center {
margin:auto;
}
.grid {
}
.grid-1 {
width:100%;
}
.grid-1-2 {
width:50%;
}
.grid-1-3 {
width:33.33%;
}
.grid-2-3 {
width:66.66%;
}
.grid-1-4 {
width:25%;
}
.grid-3-4 {
width:75%;
}
.grid-1-5 {
width:20%;
}
.grid-2-5 {
width:40%;
}
.grid-3-5 {
width:60%;
}
.grid-4-5 {
width:80%;
}
@media (max-width: 768px) {
*[class*="row"] {
-webkit-flex-direction: column;
flex-direction: column;
}
*[class*="grid"] {
width:100%;
}
}
/* Dropdown menu */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment