002-services page-flex or grid?

I used flexbox to handle content of this page https://test.prygara.com/services/. I needed red, yellow and green borders be on the same level to keep the borders consistent (see picture)

Is it better to keep this page as is or use grid? I was not sure about grid because the amount of content in each section is different…and I would like to keep the borders on the same level as shown with red arrows on the above pic.

P.S. The above screenshot is taken in Chrome. I just discoverd that the borders are not on the same level in Firefox. I guess that’s because I used pixels in some cases for margins…

It’s not level in my chrome.

You must have made it fit at the exact width you had your page open :slight_smile:

You can line those up with flex or grid but for flex you’d need to do each small block individual horizontally in pairs and then they will align on each row.

With grid you would need all individual items as direct children of the parent and then you could place each block as required into the grid structure.

For both of the above you would need a div around each heading and associated text in order to place them.

As your heading text will wrap at small widths and become taller then it’s probably a job for grid as you need a row and column alignment (like a table). (Indeed display:table could do this but is not so flexible).

2 Likes

You are right :slightly_smiling_face: It probably wasn’t a good idea :laughing:
Let me try your suggestion with grid.

1 Like

Please take a look when you get a chance. I’ve updated the link at the top of this post.

<main id="primary" class="site-main">

 <header class="entry-header"><h1 class="entry-title">Services</h1>	</header>
  <div class="entry-content">
		  
  <div>
     <h1></h1>
     <p></p>
  </div>

 <div>
  <h1></h1>
  <p></p>
 </div>
...

</main> 

.services .entry-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  font-size: 1.3rem;
  
}

.services .entry-content > div {
  max-width: 870px;
  width: 100%;
  margin: 0 auto;
 
} 

.services .entry-content div:nth-child(1){
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  
}

.services .entry-content div:nth-child(2){
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  
}

...

@media screen and (max-width: 1080px) {
    .services .entry-content   {
      display: flex;
      flex-flow: column wrap;
      font-size: 1.2rem;
     }

   
}

That seems to be working ok if a little verbose :slight_smile:

Assuming you don’t need the html order to matter then I would just use auto rows and not have to name every item with nth:child as that is no good for a dynamic number of elements.

e.g.

That’s much simpler and easier to manage. The difference is that the elements are place horizontally in pairs rather than the column approach you took.

1 Like

No, I would prefer to keep the order of items unchanged if possible. Left column - introductions and services offered and right column - course outline. I think it would make more sense for the reader at least on desktop views. In mobile view I would stack course outline column below introductions and services offered.

P.S. I really like your solution though…trims down my spaghetti code significantly :smiley:

That complicates things a little and ties your css to your mark up order which is something I don’t like to do. You could output the items from your backend as 1, 3 and 5 and then they will align to the left by default.

Otherwise you have to be specific and address each element in the css. I wouldchange the order using the order property but that isn’t a lot different from named grid areas.

1 Like

Just curious how screenreaders would read those? Do they read HTML from left to right top to bottom?

I just tried this

.services .entry-content > div:nth-child(1){
  order: 1;
} 

and noticed order property is not working as I have this warning

“The display: block property prevents order from having an effect.
Try setting display to something other than block.”

because of the following default Chrome stylesheet rule

div {
    display: block;
}

Whats the best way to fix this?

I am curious which approach is best from accessibility standpoint - changing HTML order on the backend or using order property ?

Yes that message is nonsense as it’s the parent’s display that allows the direct child to be ordered. The display value (other than none) is ignored for flex or grid items.

I gave you an example of how to use the order property. If you only set one item to one then it will be ordered last as the non ordered items will come first.

Screen readers usually just read the html and not the css display. If the order of the html is important then keep it that way. I didn’t see any real significance to the order but if it’s important then keep the html structure.

Logical well structured html is always best for accessibility.

1 Like

I want to add vertical line dividing left column from right column (see my first post screenshot). In my original solution I had those as two groups of flex items (4 and 4) wrapped in two divs. If I add a wrapper div to first four items and add border-right then display: grid would have no effect as they no longer direct children. What’s your thoughts on that?

I added a line here using a pseudo element.

.wrap {
  position: relative;
}
.wrap:after {
  content: "";
  position: absolute;
  width: 2px;
  top: 1rem;
  left: calc(50% - 1px);
  bottom: 1rem;
  background: #000;
}
1 Like

@PaulOB There’s a typo near the end of your CSS, currently:

.wra:after {
    display: none;
  }
1 Like

Thanks @Archibald :slight_smile:

That’ll teach me to answer a question while on a mobile :wink:

2 Likes

you minus 1px from 50% using calc function. what it does? why not just do

left: 50%;

Then you’d be 1px off centre.

The element is 2px wide so 50% puts its left edge at 50% which means it’s not centred.

Imagine the element was 50% wide then it would cover the whole right half of the page. You need to move the element back towards the left side by half its width to be centred properly.

1 Like

I agree. It makes sense. Thank you.

1 Like