In this screencast I take a look at ungrid, a responsive and table-based CSS grid system and show how it can be used to split content into columns in WordPress (Genesis to be specific).
Here’s the code you see in the above video:
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
| /* ungrid | |
| ------------ */ | |
| @media (min-width: 30em) { | |
| .row { width: 100%; display: table; table-layout: fixed; } | |
| .col { display: table-cell; } | |
| } | |
| .container { | |
| margin-right: -40px; | |
| margin-left: -40px; | |
| } | |
| .row { | |
| border-spacing: 40px 0; | |
| } | |
| .vam { | |
| vertical-align: middle; | |
| } | |
| @media only screen and (max-width: 600px) { | |
| .row, | |
| .col { | |
| display: block; | |
| } | |
| .container { | |
| margin-right: 0; | |
| margin-left: 0; | |
| } | |
| .row { | |
| border-spacing: 0; | |
| } | |
| .first { | |
| margin-bottom: 40px; | |
| } | |
| } |
Thank you for such a concise post. Not being a Genesis user, I really appreciate these posts that are not behind the curtain, ?
Thanks Sridhar! If a user is already comfortable with using Genesis Column Classes – is there an advantage to using ungrid instead of them?
Ungrid provides more flexibility w.r.t widths. Ex.: 45% / 55% or say, / 340px / 20%.
For simpler columns (directly) possible via Genesis’ Column Classes, they are fine.
Thanks for this post. I’ve never seen such little code produce such flexible design. Amazing,
Q. I am using Genesis Sample Child theme like yours and on the content/sidebar page I placed all the rows in the content section area.
Is there a way these ungrid columns can extend all the way to the content area border on the left and right side? Right now they are contained so it shows as another section within the content area. Not sure how to break out to the border.
Thanks,