Demo page: CSS Grid and Flex Box

Layout samples using “display: grid” and “display: flex”

To view the CSS for this page, view the page source code (view source). The CSS is within a style tag inside the head tag of the page (versus being attached as a separate, linked file in the head tag). This is called embedded CSS.

CSS Grid example #1

A section is a block-level element, like a div. This section (called 'content_testBox1') appears in the sequentially unaltered normal flow of the html. It has 'background-color:' and 'padding:' properties applied to it, as well as a few typesetting attributes so that you can easily see it.
Without margin settings on this section (called 'content_testBox2'), this box butts right up against the item before it in normal flow.
This section (called 'content_testBox3') has a 'margin-top:' value applied to it so that there is distance between this box and the one that precedes it in normal flow. Instead of this solution, I could have chosen to apply a 'margin-bottom:' property to the previous section and no margin settings for this one to create the desired space between the elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et orci diam. Sed luctus, dolor a placerat convallis, felis diam imperdiet est, et dictum lectus purus viverra orci. Cras sagittis eget lectus eget finibus. Donec facilisis diam sit amet mauris semper, sit amet euismod dolor commodo. Vivamus non faucibus diam. Donec scelerisque mauris eu venenatis hendrerit. Nulla fringilla ut massa at ullamcorper.

Morbi et orci diam. Sed luctus, dolor a placerat convallis, felis diam imperdiet est, et dictum lectus purus viverra orci. Cras sagittis eget lectus eget finibus. Donec facilisis diam sit amet mauris semper, sit amet euismod dolor commodo. Vivamus non faucibus diam. Donec scelerisque mauris eu venenatis hendrerit. Nulla fringilla ut massa at ullamcorper. Cras sagittis eget lectus eget finibus. Donec facilisis diam sit amet mauris semper, sit amet euismod dolor commodo.

Morbi et orci diam. Sed luctus, dolor a placerat convallis, felis diam imperdiet est, et dictum lectus purus viverra orci. Cras sagittis eget lectus eget finibus. Donec facilisis diam sit amet mauris semper, sit amet euismod dolor commodo. Vivamus non faucibus diam. Donec scelerisque mauris eu venenatis hendrerit. Nulla fringilla ut massa at ullamcorper.

CSS Grid example #2

This section is set to display a grid of equally-sized items within it, no matter how many there are.

Flex Example #1

Child elements inside a flex parent — like this paragraph and the colored sections next to it — will equally divide based on the size of their contents by default.

Nunc convallis rutrum risus, id dictum libero facilisis ut. In sed mollis metus. Proin interdum nibh id sapien tincidunt, vitae ultricies tellus bibendum. Pellentesque risus leo, imperdiet a sodales non, tempor id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet urna porta ligula rutrum, ac efficitur purus varius. Nunc convallis rutrum risus, id dictum libero facilisis ut. In sed mollis metus. Proin interdum nibh id sapien tincidunt, vitae ultricies tellus bibendum. Pellentesque risus leo, imperdiet a sodales non, tempor id.
Proin interdum nibh id sapien tincidunt, vitae ultricies tellus bibendum. Pellentesque risus leo, imperdiet a sodales non, tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Flex Example #2

This example shows a simple way to place items next to one another (side-by-side), such as an image next to some descriptive text.

Subtitle

Interdum nibh id sapien tincidunt, vitae ultricies tellus bibendum. Donec aliquet urna porta ligula rutrum, ac efficitur purus varius. Nunc convallis rutrum risus, id dictum libero facilisis ut. In sed mollis metus. Proin interdum nibh id sapien tincidunt, vitae ultricies tellus bibendum.