A standard equal column layout using display: table
.
Keeps column size, padding and colouring spearate through a .content div
nested within the grid markup.
A Pen by Leon Paternoster on CodePen.
{% assign posts = site.posts | where_exp: "post", | |
"post.category != 'web'" %} | |
{% for post in posts %} | |
// Some HTML using the post object | |
{% endfor %} |
# HTML | |
<body class="font-class-name"> | |
## CSS | |
.[font-class-name] { | |
font-family: [fallback stack] | |
} |
<ul> | |
{% for book in site.data.contentful.spaces.books.book %} | |
<li>{{ book.title }}, by {{ book.authorSurname }}<br>{{ book.summary | markdownify }}{% if book.picture %}<img src="{{ book.picture.url }}">{% endif %}</li> | |
{% endfor %} | |
</ul> |
--- | |
book: | |
- sys: | |
id: 6bAHfY4LlYA2uoqGSOGuGm | |
title: Pale Fire | |
authorSurname: Nabokov | |
summary: A curate's egg, a mystery, a beautiful examination of madness, creativity | |
and fantasy. | |
- sys: | |
id: 7lLBrsiBmEUUiUEwEoGAyK |
{% assign advent_posts = (site.posts | where: "tag", "advent" | reverse ) %} | |
{% for post in advent_posts limit:24 %} | |
<article class="custom-flex-row pb2"> | |
<p class="custom-icon-xmas-{{ forloop.index }} f4 ttu tracked dark-green ma0 mb2 pr2">{{ post.date | date: "%B %e" }}</p> | |
<a class="white" href="{{ post.url }}"><img class="custom-constrain-img" src="{{ post.featured-image }}" alt="{{ post.featured-alt }}"></a> |
A standard equal column layout using display: table
.
Keeps column size, padding and colouring spearate through a .content div
nested within the grid markup.
A Pen by Leon Paternoster on CodePen.
Properly separated column layout, so width, padding and colouring can be separated from table cells.
Key is to apply colour classes to .g-col-x rather than .g-content
Need .g-row (or any other block element) to force a new row, although you don't need any CSS here. Could apply display: table-row to maintain table style semantics.
A Pen by Leon Paternoster on CodePen.