Проблемы с сеткой контейнера - PullRequest
Новая
       7

Проблемы с сеткой контейнера

0 голосов
/ 06 января 2020

Я пытаюсь выучить CSS Сетки, и у меня возникают проблемы при попытке поместить элементы в указанную c строку.

Я получил основной контейнер со следующим 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%;

Я получил свой заголовок в первой строке, содержимое во второй до седьмой строки и нижний колонтитул в последней.

В начале содержимого, которое я хочу поместите изображение в центр второго ряда, но по какой-то причине я не могу этого сделать, поэтому я получаю большой разрыв между вершиной содержимого div и изображением.

Это код для этот контейнер: 

  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;

Вот код для изображения: 

  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;

А вот компонент: 

<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>

Я новичок с css Я думаю, что если кто-то может помочь мне, я буду очень рад, и если у вас есть какие-либо советы о том, как использовать css сетки лучше, пожалуйста, не стесняйтесь и скажите мне, как это сделать правильно.

Заранее спасибо! * 1 023 *

Ответы [ 2 ]

0 голосов
/ 06 января 2020

'justify-content' - горизонтальное выравнивание и 'align-items' - вертикальное выравнивание. Фактически, разрыв вызван align-items: center;. Вы можете удалить align-items: center; или поместить align-self: start; на контейнер изображения, чтобы манипулировать только элементом сетки контейнера изображения.

0 голосов
/ 06 января 2020

Разрыв, который вы видите, вовсе не вызван сеткой, а изображение или что-либо еще в .App-main не стилизуется сеткой. Проблема заключается в том, что вы выравниваете весь свой флекс-контент по центру с помощью justify-content: center;, который дополняет верх и низ .App-main для центрирования всего по вертикали. удалите его, чтобы получить желаемые результаты.

Вот ответвление вашего repl с удаленной строкой CSS.

...