CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Feature list

<!-- Feature item -->
<div style="
    display: flex;

    /* OPTIONAL: Reverse the order of image and content */
    flex-direction: row-reverse;

    /* OPTIONAL: Spacing between items */
    margin: 16px 0;
">
    <!-- Image -->
    <div style="
        width: 128px;
    ">
        ...
    </div>

    <!-- Right side -->
    <div style="
        /* Take the remaining width */
        flex: 1;
    ">
        ...
    </div>
</div>

<!-- Repeated items -->
...

Related patterns

Feature comparison

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!