3

I'm trying to solve a problem where if screen is wide enough, a CSS grid is centered and the cells in it evenly span the available space. This is to avoid an effect where on large screens (e.g. desktops), the content would span the entire screen making it difficult to follow.

It seems I'm near otherwise, but last one seems to be toughest one: filling the grid cells. It might also be due to the approach I took and I just don't understand, but it could also be I don't understand/know the CSS attributes well enough.

I have a pen that best shows the situation. And since a picture is as good as thousands words at least, I show the layout problem that is painful to watch:

br00tal CSS grid layout problem

Question: What would be the way to even out the other cells with Article? I.e. have their left and right edges be on the "same line" with Article? (There's also another problem, when Article is resized smaller, a vertical scrollbar appears instead the contents of Article wrapping.)

I think the relevant part in the CSS is the part that starts with

@media only screen and (min-width: 600px) {
    .container {
        grid-template-columns: repeat(3, 1fr);    

       /* These are the pieces that set centering. */
       margin: auto;
       width: 1000px;        
       justify-items: center;    
    }

I have mentally toyed with an idea to add "side columns" and see if I could expand this those edges. I would, but I'm not sure if that's the path to take and my current skills are, to say, a bit lacking in CSS. :)

Veksi
  • 3,556
  • 3
  • 30
  • 69
  • 1
    With `justify-items: center` on the grid container, you are centering the grid items, *not their content*. If you want to center only the content, then apply the centering properties to the grid items ([revised demo](https://codepen.io/anon/pen/gjJYOG)). It's explained in more detail in the dupe. – Michael Benjamin Aug 14 '18 at 20:56
  • @Michael_B Ah, I see about the revised demo the flex layout added. I'm not qualified to tell which would be better as both seem to solve the problem. Maybe that flex layout gives more tools to solve other problem, i.e. applying `flex-wrap: nowrap;` or something to remove the scrollbar before the other media query kicks in, removes the nav to the side menu and wraps the text. – Veksi Aug 14 '18 at 21:23

1 Answers1

4

If I understand the question correctly, you want all the divs to be 100% of the grid container and inline with the article?

.container header,
.container nav,
.container footer {
   grid-column: span 3;
   width: 100%;
}

.container section {
   grid-column: span 3;
   width: 100%;
}

You need to add 100% width to the items, they will go to the size of the container.

Here you go: https://codepen.io/anon/pen/YjMmLw?editors=0110

static_null
  • 194
  • 4
  • 14
  • 1
    You are right. Man, I feel like a dumbleton. You probably don't believe it, but I mucked around with CSS grid some hours already... It doesn't help to be a n00b and it's midnight too. I'll take this and run. Cheers! – Veksi Aug 14 '18 at 20:39
  • Not sure how this answer solves the problem. It simply overrides the centering. – Michael Benjamin Aug 14 '18 at 21:05
  • @Michael_B I didn't find a way to have the grid elements positioned in the middle of the viewport and be of the same size. That being noted, my next step would be eliminating the scrollbar on _Article_ that appears when it's resized to smaller. I'd like the text just wrap. But it's past midnight already, so I may have to try later. – Veksi Aug 14 '18 at 21:09
  • *"I didn't find a way to have the grid elements positioned in the middle of the viewport and be of the same size."* … see my comment to your question and refer to the duplicate post. You'll find a simple solution and explanation. – Michael Benjamin Aug 14 '18 at 21:15
  • 1
    re: `
    ` scrollbar... It's not wrapping because you have the container set to a fixed width (`width: 1000px`). That will prevent the container from shrinking and, therefore, the text from wrapping. Instead use `max-width: 1000px`. https://codepen.io/anon/pen/gjJYOG
     – Michael Benjamin Aug 14 '18 at 21:16
  • 1
    Also, your question may be confusing because you say the problem is a "vertical" scrollbar. I think you mean "horizontal". – Michael Benjamin Aug 14 '18 at 21:16
  • There's a lot of learning here today for me. I'm not sure how to handle this situation now that I already accepted this. I find your notes valuable, in fact found those two width attributes too (and something called "fluent typography" also, tangentially, I think I want to explore later this week). I need to get some sleep now, been awake over 24 h now, but I'll check if you or someone have advice about how to handle this dupe thing. – Veksi Aug 14 '18 at 21:28
  • 1
    No need to "handle this situation". You can keep things as is. If you find my answer in the duplicate helpful, you can give it an upvote. – Michael Benjamin Aug 14 '18 at 22:24