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; }
You are here: Home » Tutorials » Gimp Tutorials 
Print this page

Gimp Tutorials

Fluid Grid using text-align: justify

Here is a list of Gimp tutorials

Resize the grid to see how the elements reflow based on the new column-widths defined in the media queries.
There is no need to ever define horizontal margins/floats/or clear-fixes.

*These elements are visible only for demonstration purposes and should be hidden in production by removing the borders.

More info here: here

  Top
Previous page: Tutorials  Next page: menu within the page title