Question 45171 in Html Question posted in
Some basic documentation can be found here.

How do I create 3 columns flex grid with first and last columns have 2 rows while the middle has rowspan? – Html

As the title says, here’s my example

enter image description here

I’ve already tried doing this using flex with position absolute but the problem is the responsiveness. How do I make this better? Is there a way that I could do this with just flexbox and not use position absolute while making the first row of the first and last column have equal height?

Here’s my initial code:

<div class="block uk-width-1-1">
        <div class="content-wrapper">
            <div class="content uk-position-relative">
                <div>
                    <div class="uk-grid uk-child-width-1-4 uk-flex-between">
                        <div class="card--wrapper">
                            <div class="card">
                                <h3>Lorem Ipsum</h3>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
                            </div>
                        </div>
                        <div class="card--wrapper">
                            <div class="card">
                                <h3>Lorem Ipsum</h3>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>     
                            </div>        
                        </div>
                    </div>
                    
                    <div class="uk-grid uk-child-width-1-4 uk-flex-between">
                        <div class="card--wrapper">
                            <div class="card">
                                <h3>Lorem Ipsum</h3>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>    
                            </div>
                        </div>
                        <div class="card--wrapper">
                            <div class="card">
                                <h3>Lorem Ipsum</h3>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tortor ut ante rhoncus placerat. Nam at placerat tellus, a accumsan nisi.</p>
                            </div>
                        </div>
                    </div>
                    
                </div> 
                <div class="image--wrapper uk-position-absolute uk-width-1-3">
                    <div class="image">
                        <!-- Image here (middle column)-->
                        <img src="/../images/hero-sample.png" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.image--wrapper {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }
    .block {
        background: green;
    }
    h3, p.description {
        color: white;
        font-family: 'Poppins';
    }
    p.description {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: rgba(255,255,255,0.7);
        margin-bottom: 0;
    }
    h3 {
        font-weight: 600;
        font-size: 16px;
        line-height: 28px;
    }
    .card {
        max-width: 240px;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid rgba(255,255,255, 0.3);
    }
    .child-width-1-4 > div {
        width: 25%;
    }
    .width-1-3 {
        width: 33%;
    }
    .grid {
        display: flex;
        flex-wrap: wrap;
        margin: 18.12px 0 0 0;
        padding: 0;
    }
    .flex-between {
        justify-content: space-between;
    }
    .position-absolute {
        position: absolute !important;
    }
    .position-relative {
        position: relative !important;
    }
    @media screen and (max-width: 1200px) {
        .content-wrapper {
            padding: 60px 25px
        }
    }
Tags:

3

Answers


  1. 0

    In this solution, the outer container is a grid with 12 columns. The middle column (.col2) takes up twice the space of col1 and col3. The -1 in grid-column: 10 / -1 means to span to the end of the grid, wherever it is.

    Inside, I make the first and last columns into flexboxes, so that their children can take up an even amount of space in their respective containers. All spacing between columns and rows is accomplished using gap.

    .container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-height: 100vh;
  min-height: 100dvh;  
  gap: 1rem;
  padding: 1rem;
}

 /* 3 columns */
.col1 {
  grid-column: 1 / 4;
}

/* 6 columns */
.col2 {
  grid-column: 4 / 10;
}

/* 3 columns */
.col3 {
  grid-column: 10 / -1; 
}

.col1,
.col3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.col1 > *,
.col3 > * {
  flex: 1;
}

body { margin: 0; }
* { box-sizing: border-box; }
.col2, .container > * > * { border: 1px solid; }
    <div class="container">
  <div class="col1">
    <div></div>
    <div></div>
  </div>
  <div class="col2"></div>
  <div class="col3">
    <div></div>
    <div></div>
  </div>    
</div>

    jsFiddle

    Login or Signup to reply.
  2. 0

    there is more than one way to do that. I personally prefer using flex for such situations because it’s more flexible for adjustment.

    so basically, I used three containers in a row flex-direction then in the containers on the sides, I put 2 divs in each with column flex-direction. that’s it.

    you can control max and min width as you wish.

    body {
    background: lightgrey;
    display: flex;
    justify-content: center;
}

#container {
   /* background: lightcoral; */
   width: 100%;
   height: 400px;
   display: flex;
   flex-direction: row;
}

.middle {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

.left, .right{
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.left div,  
.right div {
    border: 1px solid;
    width: 100%;
    height: 50%;
    margin: 10px;
}

.middle div {
    border: 1px solid;
    width: 95%;
    height: 100%;
    margin: 10px;
   
}
    <body>

 <div class="container" id="container">
  <div class="left">
    <div></div>
    <div></div>
  </div>
  <div class="middle">
    <div></div>
  </div>
  <div class="right">
    <div></div>
    <div></div>
  </div>
 </div>
    
</body>
    Login or Signup to reply.
  3. 0

    In your problem its better to display grid instead of flex

    • div1: middle
    • div2: left-top
    • div3: left-bottom
    • div4: right-top
    • div5: right-bottom
    .parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 2 / 3 / 5; }
.div2 { grid-area: 1 / 1 / 2 / 2; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 1 / 5 / 2 / 6; }
.div5 { grid-area: 2 / 5 / 3 / 6; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search