CSS Grid, неожиданный пробел

Я сталкиваюсь с неожиданными пробелами при создании встроенных CSS-сеток.

Макет состоит из карточек (по 3 карты в ряд), и каждый подэлемент карты (оранжевый/серый/черный в моем примере) должен быть выровнен между собой (в одном ряду). Ожидаемая максимальная высота строки должна основываться на содержимом ее ячеек. Но высота намного больше содержимого ячеек:

        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        .card {
            display: grid;
            grid-row-gap: 10px;
            grid-auto-rows: 1fr;
        }
        
        .header {
            background-color: orange;
        }
        
        
        .content {
            background-color: grey;
        }
        
        .footer {
            background-color: black;
            color: white;
        }

<div class = "cards">
    <div class = "card">
        <div class = "header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 10%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 15%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 20%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 25%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 30%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
   </div>

Что мне нужно исправить в этом макете, чтобы не было таких неожиданных пробелов?

Проблема в grid-auto-rows: 1fr; ваших карточках... удалите это, и лишнее место исчезнет. Обратите внимание, это не приведет к совмещению содержимого карточек друг с другом, это отдельная проблема.

— 09.04.2024 12:14

Нет, это тот случай, когда ОП может получить желаемый результат только с помощью subgrid. Пример ниже.

— 09.04.2024 12:20

@ralph.m — Я в курсе — см. stackoverflow.com/questions/56711501/…

— 09.04.2024 12:24

css css-grid

09.04.2024 12:00

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот тут-то и пригодится subgrid. Вместо grid-auto-rows: 1fr; вам нужно следующее:

.card {
    display: grid;
    grid-row-gap: 10px;
    /* grid-auto-rows: 1fr; */
    grid-template-rows: subgrid;
    grid-row: span 3;
}

   .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }
        
        .card {
            display: grid;
            grid-row-gap: 10px;
            grid-template-rows: subgrid;
            grid-row: span 3;
        }
        
        .header {
            background-color: orange;
        }
        
        
        .content {
            background-color: grey;
        }
        
        .footer {
            background-color: black;
            color: white;
        }

<div class = "cards">
    <div class = "card">
        <div class = "header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 10%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 15%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 20%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 25%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class = "card">
        <div class = "header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class = "content">
            <img src = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style = "width: 30%" />
        </div>
        <div class = "footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
   </div>

subgrid действительно является решением, я этого не знал. Спасибо!

— 09.04.2024 15:01

09.04.2024 12:15