-
-
Save dongyuwei/5726726 to your computer and use it in GitHub Desktop.
Fluid Grid using text-align: justify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Fluid Grid using text-align: justify</h1> | |
<!-- FLUID GRID --> | |
<ul id="Grid"> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li class="placeholder"></li> | |
</ul> | |
<!-- LEGEND --> | |
<p>Resize the grid to see how the elements reflow based on the new column-widths defined in the media queries.<br/> | |
<strong>There is no need to ever define horizontal margins/floats/or clear-fixes.</strong></p> | |
<label>Placeholder/gap element*</label> | |
<label>Break element*</label> | |
<p><em>*These elements are visible only for demonstration purposes and should be hidden in production by removing the borders.</em></p> | |
<p>More info here: <a target="_blank" href="http://www.barrelny.com/blog/text-align-justify-and-rwd/">here</a></p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* -- DEFAULTS -- */ | |
div, ul, li{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
/* -- FLUID GRID STYLES -- */ | |
#Grid{ | |
margin-bottom: 40px; | |
text-align: justify; | |
font-size: 0.1px; | |
} | |
#Grid li{ | |
display: inline-block; | |
background: #eee; | |
width: 23%; | |
padding-top: 23%; /* Used instead of height to give elements fluid, width-based height */ | |
margin-bottom: 2.5%; | |
} | |
#Grid::after{ | |
content: ''; | |
display: inline-block; | |
width: 100%; | |
border-top: 10px dashed #922d8d; /* Border added to make element visible for demonstration purposes */ | |
} | |
#Grid .placeholder{ | |
padding: 0; | |
border-top: 10px solid #922d8d; /* Border added to make element visible for demonstration purposes */ | |
} | |
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */ | |
/* 3 COL */ | |
@media (max-width: 800px){ | |
#Grid li{ | |
width: 31%; | |
padding-top: 31%; | |
margin-bottom: 3%; | |
} | |
} | |
/* 2 COL */ | |
@media (max-width: 600px){ | |
#Grid li{ | |
width: 48%; | |
padding-top: 48%; | |
margin-bottom: 4%; | |
} | |
} | |
/* SINGLE COL */ | |
@media (max-width: 400px){ | |
#Grid li{ | |
width: 100%; | |
padding-top: 100%; | |
margin-bottom: 5%; | |
} | |
} | |
/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */ | |
h1{ | |
font: 600 20px "Helvetica Neue"; | |
text-align: right; | |
text-transform: uppercase; | |
} | |
label{ | |
padding: 8px 15px; | |
margin-bottom: 20px; | |
display: block; | |
font: 100 22px "Helvetica Neue"; | |
border-left: 10px solid #922d8d; | |
} | |
label:last-of-type{ | |
border-left: 10px dotted #922d8d; | |
} | |
p{ | |
font: 200 15px/1.5em "Helvetica Neue"; | |
max-width: 400px; | |
margin-bottom: 30px; | |
color: #333; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment