Understanding grid areas

HTML-CSS
1

I just started working with grid.
I’m creating a mobile version now. I would like to create empty space between item E and F that has also height of 50px , just like the other items.

Every item except item B is 50px high.
Item B is auto. The height depends on how long the text is inside item B.

I think this is 1 column with 6 rows.

I’m not sure if I’m at the right path. I know you can create empty space with ’ . ’ and I assigned a name to the classes of the items. The problem is that when I do that, my grid disappears.

I have read and watched several video’s but I don’t know what to search for.

For now I commented the items out, maybe there are already some mistakes in the first part of the code.

image
image1646×713 129 KB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">
        <div class="itemA">A</div>
        <div class="itemB">B: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa cum dolore perferendis molestias minus iusto maiores. Nulla rem cum quam eaque animi nihil unde esse, maxime quos sint ea omnis, corrupti iure aliquam fuga ipsum modi? Impedit omnis quibusdam rem aperiam corrupti dolores animi ratione inventore. Dignissimos ea quas voluptatibus molestias reprehenderit alias unde harum totam perspiciatis minima nulla quod, sit sed aperiam temporibus perferendis repellendus illum nesciunt necessitatibus quisquam quaerat tenetur ratione. Reprehenderit, totam asperiores? Nostrum magni iure sint at voluptas culpa, soluta distinctio impedit blanditiis esse! Aliquam nostrum maxime laudantium eaque repellat, tenetur asperiores quaerat consequatur ut labore rem mollitia? Placeat aperiam quae error veniam cupiditate consequuntur numquam incidunt, maiores enim aspernatur sequi a voluptatum sunt corrupti, ratione facilis obcaecati quidem illo! Ea mollitia voluptatibus, ratione maiores repellat aperiam! Enim nostrum ullam delectus unde sit! Beatae sapiente ut non hic natus quasi. Atque maiores molestias fuga quo dolor!</div>
        <div class="itemC">C</div>
        <div class="itemD">D</div>
        <div class="itemE">E</div>
        <div class="itemF">F</div>
    </div>
    
</body>
</html>

.container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 50px auto 50px 50px 50px 50px;
    row-gap: 16px;
    column-gap:16px;
    padding: 16px;
    background-color: rgb(240, 234, 231);
    grid-template-areas: 
    'h'
    'm'
    'h'
    'h'
    'h'
    '.'
    'h';
}

.container  div {
    background-color: rgb(217, 81, 81);
    color:white;
    display: flex;
    justify-content: center;
    padding: 10px;
}

/*
.itemA {
    grid-area: h;
}

.itemB {
    grid-area: m;
}

.itemC {
    grid-area: h;
}

.itemD {
    grid-area:h;
}

.itemE {
    grid-area: h;
}

.itemF {
    grid-area: h;
}

*/
2

you have three separate areas that have the same name, I am not sure how the situation is resolved. Try giving a different name to the three h sections and assign the elements to the areas accordingly

3

I guess I have sat behind the computer for far too long. Today I found the solution much faster.

When creating a grid. I found out that every item must have their own grid area name assigned or else the grid doesn’t work. If I wanted to add empty space, in my case that space must also be declared in grid-template-rows.
To add the empty space I should have written ' . ' between the items I want to have empty space.

This is the result I was looking for

image
image1452×924 64.9 KB

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">
        <div class="itemA">A</div>
        <div class="itemB">B: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa cum dolore perferendis molestias minus iusto maiores. Nulla rem cum quam eaque animi nihil unde esse, maxime quos sint ea omnis, corrupti iure aliquam fuga ipsum modi? Impedit omnis quibusdam rem aperiam corrupti dolores animi ratione inventore. Dignissimos ea quas voluptatibus molestias reprehenderit alias unde harum totam perspiciatis minima nulla quod, sit sed aperiam temporibus perferendis repellendus illum nesciunt necessitatibus quisquam quaerat tenetur ratione. Reprehenderit, totam asperiores? Nostrum magni iure sint at voluptas culpa, soluta distinctio impedit blanditiis esse! Aliquam nostrum maxime laudantium eaque repellat, tenetur asperiores quaerat consequatur ut labore rem mollitia? Placeat aperiam quae error veniam cupiditate consequuntur numquam incidunt, maiores enim aspernatur sequi a voluptatum sunt corrupti, ratione facilis obcaecati quidem illo! Ea mollitia voluptatibus, ratione maiores repellat aperiam! Enim nostrum ullam delectus unde sit! Beatae sapiente ut non hic natus quasi. Atque maiores molestias fuga quo dolor!</div>
        <div class="itemC">C</div>
        <div class="itemD">D</div>
        <div class="itemE">E</div>
        <div class="itemF">F</div>
    </div>
    
</body>
</html>

CSS

.container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 50px auto 50px 50px 50px 50px 50px;
    row-gap: 16px;
    column-gap:16px;
    padding: 16px;
    background-color: rgb(240, 234, 231);
    grid-template-areas: 
    'A'
    'B'
    'C'
    'D'
    'E'
    '.'
    'F'
    ;
}

.container  div {
    background-color: rgb(217, 81, 81);
    color:white;
    display: flex;
    justify-content: center;
   align-items:center;

    padding: 10px;
}


.itemA {
    grid-area: A;
}

.itemB {
    grid-area: B;
}

.itemC {
    grid-area: C;
}

.itemD {
    grid-area:D;
}

.itemE {
    grid-area: E;
}

.itemF {
    grid-area: F;
}
1 Like