Flex columns/rows

HTML & CSS
1

I have designed a layout involving 3 columns which inside each containing rows. The live code can be found here.

I’ve tested on various browsers and it all looks good. But when it comes to viewing it on an iPad (Desktop & Tablet breakpoint) the blockquote (red area) doesn’t extended to fill the height of the rowspan… yet it does on the browser… can somebody please point out to me what I am doing wrong please.

Also, what is the recommended method for dealing with ‘empty’ flex items? As not all of my items will require images.

2

I don’t have an ipad to test at the moment but it’s probably your use of height:100% which is unreliable and relies on certain situations being correct. You don’t need to use height:100% to get equal heights in flexbox anyway because that’s what it was designed for.

It looks to me as though the red background should simply be placed on .col-2 as that is the 100% high element by default.

e.g.

.col-2{background:#e53b37;}

If indeed you do need nested children to 100% of the parent then you’d need the nested flexbox column approach like this. Again there is no need for a height:100% anywhere.

I would also drop all the flexbox pre-fixes now as most of the modern browsers have full support and indeed some of those old prefixes could break things.

Also I suggest you don’t use the meta viewport tag that you have chosen as that stops me pinching and zooming and is the most annoying thing for me as I have to pinch and zoom everything on a tablet in order to read.

Use this one:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2 Likes
3

Thanks for the suggestions and advice PaulOB. I ended up applying the background-color to .col-2.

In this situation when I don’t require images for each flex child… I have left the div empty. Is this approach acceptable or should each flex child contain content? The layout appears to be rendering as I want it to but I wasn’t sure if there was a better approach to this.

4

Generally you want to avoid empty elements in the html that are creating a layout effect. Sometimes the alternative is more complicated and an empty element will suffice but still feels dirty :slight_smile:

However I think in your example you could have achieved the effect without adding extra html. As an example the black space on the wide screens display could be achieved like this:

.row.rowspan{display:flex;flex-direction:column;justify-content: flex-end;}

That assumes that you remove the empty row div and I have only tested quickly in devtools so there may be consequences to look out for.

You may also of course need to modify in further media queries for the smaller display (probably just setting it to flex-start instead of flex-end).

2 Likes
5

@ikandee I see you didn’t follow up on this advise from @PaulOB :slight_smile:

It’s important

2 Likes
6

I had implemented this change into the final code version.

1 Like
7

I noticed that you have a lot of nested divs that you’re not even using. Like:

<div class="column col-1">
    <div class="row">

    </div>
    <div class="row rowspan">
		<img data-sizes="auto" data-srcset="portfolio/images/project-1/t4-300.jpg 300w, portfolio/images/project-1/t4.jpg 900w" class="lazyload">
    </div>
</div>

Why do you use those rows within the column div?

Also you have a lot of double declarations in your css. For example in .quote blockquote:before you declare two times the position property:

.quote blockquote:before {
	position: absolute;

	display: inline-block;
}
8

I suggest you should also update the test page you link to in your first post.

It would help others to see/test the changes you make, and perhaps contribute. :slight_smile:

2 Likes
9

Hi PaulOB, I have updated the test page with your suggestion and removed the empty divs and used the justify-content on the rows that require spanning… however I am now struggling to get the blockquote to span the height of the of the first two images in col-3. (Basically need it to be a mirror image of col-1 but aligned to the top.) Can you please advise what I am doing wrong?

10

@ikandee Just out of curiosity. Why are you using those nested (row) divs within those columns:

    <!-- Col 1 -->
    <div class="column col-1">
      <div class="row rowspan rowend"> <img 
        data-sizes="auto"
        data-srcset="portfolio/images/project-1/t4-300.jpg 300w,
        portfolio/images/project-1/t4.jpg 900w"
        class="lazyload"> </div>
    </div>
    
    <!-- Col 2 -->
    <div class="column col-2">
      <div class="row quote rowspan rowstart">
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et ornare tortor. Suspendisse consectetur, est ut scelerisque scelerisque, tellus velit malesuada ligula, et tristique magna mi vitae leo. Nunc ex neque, elementum eu tellus et, posuere fermentum leo. Duis tempor erat pretium magna venenatis, ac dignissim sem scelerisque. Ut orci lectus, tincidunt eget placerat volutpat, sodales quis tellus. Ut bibendum sollicitudin semper.</p>
          <p class="quoteName">Clients Name</p>
        </blockquote>
      </div>
    </div>
11

Hi Donboe, I am still trying to get my head around the whole flexbox concept - but I came across a tutorial that used rows within columns to achieve the appearance of column spanning… it seemed logical to me as it was exactly what I was after. The layout I am trying to achieve are 3 columns each containing various images (& image orientation) and blockquotes that align in an offset manner - each layout may even change depending on whether there are more or less images to use as this is going to be used in a portfolio/gallery style page. I just didn’t want to have the standard square grid design. So by having the rowspan div the idea is that it spans the height of 2 images in the flex layout.

12

Hi @ikandee. Can you maybe visualize what you would like to achieve or have you seen a site that represents your wishes? You talk about three columns, but what you showed us so far ony contains two.

13

It’s hard to give an answer because I’m not sure what overall effect you are going for? :slight_smile:

At the moment you have that blockquoute (on wide screens) as a column which is spanning 3 images vertically (although you have only given a blue background to the child element so it is only showing as content height. If the parent had a background you would see it span all three images.).

If the blockquote needs to span 2 images only then usually you would set them as a row of flex items where you split the second cell into two so that the first cell will always match the height of the subdivided cell automatically.

A fix may be to set the basis of the blue column to 66.6666% and then it should match only two of the image heights.

e.g.

@media screen and (min-width:1680px){
    
    .projectCont .quote blockquote{
        background-color:blue;
        display:flex;
        flex: 0 0 66.6666%;
    }   
}

Usually though I would be looking for automatic alignment which means manipulating the html to make sure as I mentioned above that things always match. Of course if you are changing things on smaller screens into different formats then there may be no option but to do what I suggest above.

You layout actually looks more suited to using the css grid layout as you can specify the grid items in more detail. Of course grid is not as well supported as flex yet and is a little harder to learn (I’m still learning it).

14

Thanks PaulOB, that is exactly what I was trying to achieve. :slight_smile: Hope you had an awesome Xmas & New Years!

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.