How would I go about achieving this look in CSS?

user_9313329 0
Viewed 63

I'm trying to recreate this:

Example layout

I've tried using flex-box and grid, but, no success so far.

You will find my CSS code below to illustrate what I've tried, but it doesn't seem to be the most efficient way.

I'm looking forward to any tips or solutions you might give me.

.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 2 / 2 / 4; }
.div2 { grid-area: 1 / 4 / 2 / 5; }
.div3 { grid-area: 1 / 5 / 2 / 6; }
.div4 { grid-area: 2 / 2 / 3 / 4; }
.div5 { grid-area: 2 / 4 / 3 / 5; }
.div6 { grid-area: 2 / 5 / 3 / 6; }
.div7 { grid-area: 3 / 2 / 4 / 4; }
.div8 { grid-area: 3 / 4 / 4 / 5; }
.div9 { grid-area: 3 / 5 / 4 / 6; }
.div10 { grid-area: 4 / 2 / 5 / 4; }
.div11 { grid-area: 4 / 4 / 5 / 5; }
.div12 { grid-area: 4 / 5 / 5 / 6; }
.div13 { grid-area: 5 / 2 / 6 / 4; }
.div14 { grid-area: 5 / 4 / 6 / 5; }
.div15 { grid-area: 5 / 5 / 6 / 6; }
css html
2 Answers

I would recommend to use grid only for making the whole page layout and/or layouts you can't do with flexbox. For your case flexbox is perfectly sufficient and it has better browser support.

Here is a proof of concept. But to use it productive you should set breakpoints and optimize the display on smaller screen sizes.

body
{
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.section-header
{
    display: flex;
    align-items: center;
    margin: 2em 0;
}

.section-header > div 
{
    flex-grow: 1;
}

.section-header > h2 
{
    margin: 0 1em;
    font-size: 1.5em;
}

.section-content
{
    display: flex;
}

.section-content__article
{
    width: 25%;
    border-right: thin solid #CCC;
    padding: 0 2em;
  box-sizing: border-box;
}

.section-content__article:first-child
{
    padding-left: 0;
}

.section-content__article:last-child
{
    border-right: none;
    padding-right: 0;
}

.section-content__article--with-image
{
    width: 50%;
    display: flex;
}

.section-content__article h3
{
    margin: 0;
    font-size: 2em;
    line-height: 1em;
}

.section-content__article--with-image > div
{
    width: 50%;
}

.section-content__article--with-image img
{
    max-width: 100%;
    padding-left: 2em;
    box-sizing: border-box;
}
<div class="section-header">
    <div><hr></div>
    <h2>Lorem Ipsum</h2>
    <div><hr></div>
</div>
<div class="section-content">
    <div class="section-content__article section-content__article--with-image">
        <div>
            <h3>Nam liber tempor cum soluta</h3>
            <div>
                <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
        </div>
        <div>
            <img src="http://placeimg.com/640/380/any" />
        </div>
    </div>
    
    <div class="section-content__article">
        <h3>Duis autem vel eum</h3>
        <div>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper sus cipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    
    <div class="section-content__article">
        <h3>At vero eos et accusam</h3>
        <div>
            <p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

user_11607320

you can use manually float like here:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .outher{
                float: left;
                width: 100%;
            }
            .inner{
                float: left;
                width: 25%;
                padding: 5px;
                box-sizing: border-box;
                min-width: 180px;
            }
        </style>
    </head>
    <body>
        <div class="outher">
            <div class="inner">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
            <div class="inner">
                orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
            <div class="inner">
                orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
            <div class="inner">
                orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
            </div>
        </div>
    </body>
</html>
user_128989100
Related