flexible Column Grid

Question

I have a backend where I can choose dynamically between two block elements one for images and one for text. I want to create flexible layouts for example:

____________________
|__image__|__text __|
|__text __|__image__|
|__text __|__text __|
|__image__|__image__|

and so on… Now my Problem is that I want the textblock to fit my grid row and the image block to take 50% of window width. like so:

My Structure is like this at the moment but I can change it easy if necessary, the only thing I want to use is the div with background-image. For this div im using cover css property

-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-position: center center;
background-repeat: no-repeat;

<section class="section textimgblock row fullWidth small-collapse">
        <div class="columns medium-6">
            <div class="rich-text">SOME TEXT</div>
            </div>
        </div>
        <div class="columns medium-6 bgimg" style="background-image:url('/media/images/3_1RSSWbZ.width-800.jpg');">
        </div> 
</section>

Is there a clean css/html method for doing this or should i use javascript? regards Manuel

Possible option: http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Dec 10 '15 at 14:48
Well my Question was bit too unclear sorry for that. For displaying the image I want to use a div with background-image and cover css property. — Lepus, Dec 10 '15 at 15:00

score 1 · Accepted Answer · edited May 23 '17 at 12:15

You can use the techniques from this answer

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
}
.container {
  width: 50%;
  margin: auto;
}
.row {
  display: flex;
}
.row div {
  min-height: 25vh;
  flex: 0 0 50%;
  position: relative;
}
.text {
  background: yellow;
}
.bgimg {
  position: relative;
}
.bgimg:after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 50vw;
  background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-5.jpg);
  z-index: -1;
}
.left.bgimg {
  right: 50%;
}

<div class="container">
  <div class="row">
    <div class="left text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right bgimg"></div>
  </div>
  <div class="row">
    <div class="left bgimg"></div>
    <div class="right text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, ullam.</p>
    </div>
  </div>
  <div class="row">
    <div class="left text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="row">
    <div class="left bgimg"></div>
    <div class="right bgimg"></div>
  </div>

</div>

Codepen Demo

Ok pretty nice! Do you think that there is a way to get this result without using `.right` and `.left` class? — Lepus, Dec 10 '15 at 15:33
You can call them what you want. As long as you can select them with CSS it doesn't matter. I just used classes for simplicity. — Paulie_D, Dec 10 '15 at 15:39

flexible Column Grid

1 Answers1