Пространство между первой и второй линией между сеткой галереи - PullRequest
Новая
       5

Пространство между первой и второй линией между сеткой галереи

1 голос
/ 14 апреля 2020 
.gallery{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) );

} сетка

Можете ли вы сказать мне, что, черт возьми, расстояние между первой и второй строкой? другая линия работает отлично. Я также объявил *{ margin: 0; padding: 0;}, пожалуйста, помогите.

1 Ответ

0 голосов
/ 14 апреля 2020

Ваш css создает элементы сетки длиной 250 каждый, и константа имеет небольшую высоту в этом div, поэтому она принимает полную высоту IE 250px, проверьте это https://gridbyexample.com/examples/example28/

Так что просто сделайте строки автоматически в соответствии с содержанием в нем 

.gallery{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-rows: auto;
}
<div class="gallery">
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
</div>
...