Подсетка CSS добавляет неравномерное пространство между элементами
Я использую подсетку для создания карточек с одинаковым интервалом. По какой-то причине карта добавляет много места между элементами, а в FF и Chrome пространство разное. Ниже приведен код, основанный на этом уроке.
.wrapper{
margin:0;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:1rem;
margin-top:0rem;
max-height:400px;
}
.wrapper p h2 { margin:0px;}
.wrapper img {
max-width:100%;
display:block;
}
.box{
border:1px solid #ccc;
border-radius: 6px;
padding:1rem;
display:grid;
grid-template-rows:subgrid;
grid-row:span 3;
}<div class = "wrapper">
<div class = "box">
<img src = "https://picsum.photos/600/400?random=1" />
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now</p>
</div>
<div class = "box">
<img src = "https://picsum.photos/600/400?random=4" />
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
</div>
<div class = "box">
<img src = "https://picsum.photos/600/400?random=3" />
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now</p>
</div>
<div class = "box">
<img src = "https://picsum.photos/600/400?random=2" />
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now</p>
</div>
</div>.wrapper p h2 ничего не соответствует. Я подозреваю, что вы имели в виду .wrapper :is(p, h2)
Ответы 2
Это из-за того, как вы ограничиваете размер изображения. По какой-то причине в Firefox высота дорожки рассчитывается до того, как изображения уменьшаются на max-width:100%. (Хотя я не могу найти спецификацию, для которой это правильное поведение.)
Чтобы справиться с проблемами, вызванными заменой элементов внутри сетки или гибкого контейнера, обычно помогает использование оболочки <div>, как и в данном случае.
.wrapper {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
margin-top: 0rem;
max-height: 400px;
}
.wrapper p h2 {
margin: 0px;
}
.box > div {
max-width: 100%;
}
img {
max-width: 100%;
display: block;
}
.box {
border: 1px solid #ccc;
border-radius: 6px;
padding: 1rem;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}<div class = "wrapper">
<div class = "box">
<div>
<img src = "https://picsum.photos/600/400?random=1" />
</div>
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now</p>
</div>
<div class = "box">
<div>
<img src = "https://picsum.photos/600/400?random=4" />
</div>
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
</div>
<div class = "box">
<div>
<img src = "https://picsum.photos/600/400?random=3" />
</div>
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now</p>
</div>
<div class = "box">
<div>
<img src = "https://picsum.photos/600/400?random=2" />
</div>
<h2>This is Title One</h2>
<p>This is the short description of the article which will be used for now</p>
</div>
</div>Это похоже на исправление, однако пространство после изображения в Firefox все еще существует, что не является проблемой, если оно остается одинаковым во всех браузерах, поскольку остальную часть пространства элемента можно отрегулировать, уменьшив поля.
Привет @Learning, эти места ожидаются. Как видно из i.sstatic.net/9nYHAHBK.png , пространство под изображением объединяется с заданным вами зазором сетки 1rem и верхним полем h2 по умолчанию. Как упоминалось в комментарии @Alochi, вы не смогли успешно удалить поля p и h2. Если вы говорите о горизонтальном промежутке между изображениями, то они возникают из-за заполнения 1rembox. Я полагаю, что это хороший шанс научиться использовать инструменты разработчика браузера (f12).
согласен с вами, смущающим для меня моментом было то, что разрыв в 1 rem для изображения не был выделен в инструменте разработчика, как для полей и отступов. поэтому мне было интересно, не показывает ли он указателя на поля или отступы? Я отмечу ваш ответ как правильный, так как он будет исправлен.
Промежуток или макет сетки/гибкости будут выделены, только если вы нажмете маленькую кнопку сетки/подсетки/гибкости рядом с элементом в дереве html.
Одна из возможных причин неравномерного интервала может быть связана с тем, как вы используете строки-шаблона сетки: subgrid; свойство в классе .box. Значение subgrid пока не полностью поддерживается всеми браузерами, что может привести к нестабильному поведению.
Чтобы добиться единообразного макета сетки с одинаковым расстоянием между карточками, вы можете рассмотреть возможность использования другого подхода, не полагаясь на подсетку.
Вот альтернативное решение, использующее более простую настройку сетки:
.wrapper{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
}
.box{
border: 1px solid #ccc;
border-radius: 6px;
padding: 1rem;
}
.wrapper img {
max-width: 100%;
display: block;
}
.wrapper h2, .wrapper p {
margin: 0;
}
В этом обновленном CSS вы удалили Grid-template-rows: subgrid; свойство из класса .box и упростило стиль.
Используя свойства Grid-template-columns и Gap в классе .wrapper, вы можете добиться единообразного макета сетки с равномерным расстоянием между карточками.
Обязательно протестируйте этот обновленный код в Firefox и Chrome, чтобы обеспечить одинаковое расстояние между карточками в разных браузерах.
Это неверно, потому что 1. Subgrid полностью поддерживается всеми основными браузерами. 2. Удаление подсетки означает потерю общих дорожек в .box, поэтому подэлементы больше не будут выравниваться друг с другом, если изображение/h2/p имеет разную высоту.
Я хочу использовать это, поскольку оно поддерживает все основные браузеры. однако я не уверен насчет проблемы с интервалом. я тестировал его в FF и Chrome, он не должен вести себя так, как есть..
абзацы имеют автоматическое заполнение или поля, или и то, и другое (я не помню). попробуйте установить отступы и поля равными 0 и посмотрите, сработает ли это