Kevin Powell - Community•6d ago

Grid problem

Hello, On my site when too much text goes into a cel the other got extra spaces . Only the "partnership" and "family" can get too much datas. How can I fix it without scroll thet two cell? --Link deleted: personal data-- Please search Molnár István, he have lot of text in "partnership" Important: mobile view working well, this is why grid in grid . Only desktop view wrong.

11 Replies

Chris Bolson•6d ago

You are adding the spaces by defining the grid-template-rows. grid-template-rows: 0.5fr 0.9fr 0.6fr 1.7fr 1.1fr 1.1fr 1.1fr; It works fine on mobile because you have used a media query to change the display to flex. I would suggest not defining the grid-template-rows at all and let the content define the heights

lanszelotOP•6d ago

I try it, just a minute please yes, it is working. So, I do not have to define the rows ? Can be create the grid without it? I did not know that. Thank you so much for help

Chris Bolson•6d ago

You don't have to define rows or columns. Of course if you want more than one column you do need to define that as by default the grid will add each "cell" in a column. It is more common to define column widths than row heights but sometimes it is necessary. However, in general it is better to let the content flow vertically according to it's content.

lanszelotOP•6d ago

I see. Thank you so much

Chris Bolson•6d ago

Just to add - by default flex flows in a row and grid flows as a column. In your media query you have converted the container to flex and then told it to flow as a column. It might actually be better/simpler to leave the container as a grid and just tell it to only have a single column. This way you don't have to reset or change anything else.

.container-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media screen and (max-width: 700px) {
  .container-inner{
    grid-template-columns: 1fr;  
  }
}

.container-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media screen and (max-width: 700px) {
  .container-inner{
    grid-template-columns: 1fr;  
  }
}

lanszelotOP•6d ago

Thank you so much. I try this one too It is not working to me. I uploaded to the server, please ctrl+f5 and you can check it I think I did it something wrong

Chris Bolson•6d ago

Ah, sorry, I see that you have also definined grid-areas on some of the children elements. These will be "forcing" the parent to have more than one column even if it isn't defined. With your previous solution, as you switched the parent to flex, it ignored these grid area definitions.
So, you should probably revert back to using flex as you had it before or otherwise you will need to remove the grid-areas that you have defined. which rather goes against my saying that it would "simpler" 😆 Sorry about that.

lanszelotOP•6d ago

Thank you. 🙂

Chris Bolson•6d ago

I do get the impression that you are getting into a bit of a mess with the grid areas with some excessive definitions. I suggest that you take a look at named grid areas as they are generally quite simple to follow. For example for your container-inner you could use grid areas like this:

.container-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "images images" 
      "name name" 
      "datas datas" 
      "born death" 
      "partnership family";
}
@media (max-width: 900px){
    .container-inner{
        grid-template-columns: 1fr;
        grid-template-areas: 
          "images" 
          "name" 
          "datas" 
          "born" 
          "death" 
          "partnership" 
          "family";
    }
}
.images{
    grid-area: images;
}
.name{
    grid-area: name;
}
.datas{
    grid-area: datas;
}
.born{
    grid-area: born;
}
.death{
    grid-area: death;
}
.partnership{
    grid-area: partnership;
}
.family{
    grid-area: family;
}

.container-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "images images" 
      "name name" 
      "datas datas" 
      "born death" 
      "partnership family";
}
@media (max-width: 900px){
    .container-inner{
        grid-template-columns: 1fr;
        grid-template-areas: 
          "images" 
          "name" 
          "datas" 
          "born" 
          "death" 
          "partnership" 
          "family";
    }
}
.images{
    grid-area: images;
}
.name{
    grid-area: name;
}
.datas{
    grid-area: datas;
}
.born{
    grid-area: born;
}
.death{
    grid-area: death;
}
.partnership{
    grid-area: partnership;
}
.family{
    grid-area: family;
}

Here I have given each area a logical name (based on your HTML) and defined that corresponding area for each of the elements. When defining grid-template-areas you group the areas in each row by placing them within inverted comas. So, if we have 2 columns, you need to define 2 areas for each row. Then, for smaller viewports, as you only have a single column, you just need to place each grid area name once within the inverted comas. Hopefully you will be able to follow my example CSS. Of course you don't need to do this, I just wanted to take the opportunity to explain the basics of grid-areas to you. Note - I have placed each row grouping on a new row just to help you see the pattern. This isn't necessary.

lanszelotOP•6d ago

Thank you so much. This is really helpful.

lanszelotOP•6d ago

Most of the time I use https://grid.layoutit.com/ this site, because I am able to plan it without I draw it on paper. I am just a beginner, and I have to see to make a plan. After I created I am not changing it. This is why I used that definitions.

Layoutit Grid — CSS Grids layouts made easy!

Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.

Gaming

Programming

Grid problem

Did you find this page helpful?