Kevin Powell’s grid layout
This is a more sophisticated version of Josh Comeau’s grid layout based upon a Kevin Powell vid. It’s based on a post by Stephanie Eckles and is similar to another post by Ryan Mulligan.
The idea is to use utility classes to make elements either breakout or span full-width.
By naming the vertical lines:
.container {
grid-template-columns: 1fr [content-start] 1fr [content-end] 1fr;
}
..all the children can be placed in the column called content:
.new-scraps > * {
grid-column: content;
}
Stand out section
This isn’t exactly the same as the Kevin Powell example. When builing from a markdown file you cannot have an image on it’s own. It is always inside a paragraph. With Kevin’s method the contents of the paragraph are set to be the same width as general content.
Dolor sit veniam mollit aute sit consequat incididunt exercitation pariatur velit exercitation duis. Qui veniam anim adipisicing do cillum eiusmod cupidatat qui est enim. Aliquip culpa do tempor in nostrud quis.
An alternative to picsum.photos is unsplash.it which seems to work the same way.
Tempor non amet commodo consequat exercitation laborum Lorem non occaecat deserunt nisi ullamco consequat sint. Tempor velit id ut quis. Tempor dolor nulla dolore fugiat consectetur excepteur. Anim mollit elit qui incididunt ullamco duis.
Ex deserunt ipsum ut anim sint consectetur cillum velit reprehenderit ipsum incididunt nulla enim. Amet et anim proident eiusmod do. Minim id proident ut excepteur elit et esse nostrud. Nulla laboris pariatur eiusmod nisi occaecat commodo voluptate aliquip ipsum sint.