<ol class="c-listing c-listing--summaries c-listing--inset">
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
</ol>
<ol class="c-listing{% for mod in mods %} c-listing--{{ mod }}{% endfor %}"{{ " reversed" if reversed }}>
{%- for item in items -%}
<li>
{%- render "@" + component, item -%}
</li>
{%- endfor -%}
</ol>
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
},
"mods": [
"summaries",
"inset"
],
"component": "summary",
"items": [
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2015/grid-flexbox-box-alignment-our-new-system-for-layout/",
"title": "Grid, Flexbox, Box Alignment: Our New System for Layout",
"author": "Rachel Andrew",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 6,
"content": "[Rachel Andrew](https://rachelandrew.co.uk/) unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, `div`-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.\n"
},
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2015/grid-flexbox-box-alignment-our-new-system-for-layout/",
"title": "Grid, Flexbox, Box Alignment: Our New System for Layout",
"author": "Rachel Andrew",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 6,
"content": "[Rachel Andrew](https://rachelandrew.co.uk/) unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, `div`-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.\n"
},
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2015/grid-flexbox-box-alignment-our-new-system-for-layout/",
"title": "Grid, Flexbox, Box Alignment: Our New System for Layout",
"author": "Rachel Andrew",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 6,
"content": "[Rachel Andrew](https://rachelandrew.co.uk/) unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, `div`-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.\n"
},
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2015/grid-flexbox-box-alignment-our-new-system-for-layout/",
"title": "Grid, Flexbox, Box Alignment: Our New System for Layout",
"author": "Rachel Andrew",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 6,
"content": "[Rachel Andrew](https://rachelandrew.co.uk/) unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, `div`-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.\n"
}
]
}
.c-listing {
display: flex;
flex-wrap: wrap;
@supports (display: grid) {
display: grid;
grid-gap: map(spaces, xsmall);
}
> * {
display: flex;
flex: 1;
margin: 0 map(spaces, xsmall) map(spaces, xsmall) 0;
@supports (display: grid) {
margin: 0;
}
}
}
.c-listing--authors {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
> * {
flex: 8rem 0 0;
}
}
.c-listing--summaries {
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
> * {
flex: 16em 1 0;
}
}
.c-listing--inset {
padding: map(spaces, xsmall) 0 0 map(spaces, xsmall);
@supports (display: grid) {
padding: map(spaces, xsmall);
}
}
There are no notes for this item.