Search code examples
cssreactjscss-grid

Problems with grid container

I'm trying to learn CSS Grids and I'm getting problems while trying to put elements inside an specific row.

I got a main container with the following CSS:

  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 25% 25% 25% 25% 25% 25% 25%;
  grid-row-gap: 3%;
  height: 100%;
  width: 100%;

I got my header in the first row, the content on the second until the seventh row and the footer in the last one.

At the beginning of the content I want to put an image on the center of the second row but for some reason I'm not able to do that so I get a big gap between the top of the content div and the image.

This is the code for that container:

  text-align: center;
  background-color: #E8F1FA;
  border: rgba(255,255,255,0.22) 1px solid;
  box-shadow: 8px 8px 20px 0 rgba(108,141,194,0.28), -8px -8px 22px 0 rgba(255,255,255,0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 7;

Here the code for the image:

  align-self: center;
  border-radius: 50%;
  background-color:url("profilePic.jpg") no-repeat fixed center;
  border: rgba(255,255,255,0.22) 1px solid;
  box-shadow: 8px 8px 20px 0 rgba(108,141,194,0.28), -8px -8px 22px 0 rgba(255,255,255,0.82);
  width: 100px;
  height: 100px;
  grid-row-start: 2;

And here the component:

<div className="App-main">  
<span className="Photo" />
<p>Example</p>
<button className='btn'>Example</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero quam, placerat ut interdum eget, sagittis eget mi. Mauris et justo blandit, posuere nunc eget, convallis augue.</p>
<p>Pellentesque luctus nisi eu diam porta imperdiet. Nulla facilisi. Phasellus sollicitudin erat at ante lobortis consectetur. In sed rhoncus tellus. Morbi eleifend, eros eget dictum maximus, ipsum felis sagittis urna, id luctus enim tellus ac eros. Vivamus condimentum, dolor dignissim ultricies lacinia, mi eros facilisis nunc, ac rhoncus sem enim in magna.</p>
</div>

I'm new with css grids so I believe there are a lot of things that I'm doing wrong.

Please, if someone could help me I'll be really glad, and if you have any advice on how to use css grids in a better way please don't hesitate and tell me how to do it properly.

Thanks in advance!

Solution

  • The gap you're seeing isn't caused by grid at all, nor is the image or anything else in .App-main being styled by the grid. The issue is that you are aligning all of your flex content to the center with justify-content: center;, which is padding the top and bottom of .App-main to center everything vertically. remove it to get the results you want.

    Here's a fork of your repl with that line of CSS removed.