Problem with CSS grid and responsive design

user_12217393 0
Viewed 236

I'm making a 'books social media' and I'm having problems with responsive designbook-container

Here's the HTML's code:

    <!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inicio</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap" rel="stylesheet">

</head>

<body>


    <section>
        <div id="who-we-are">
            <h2 id="love-for-books">
            </h2>
        </div>
    </section>

    <header>
        <div id="nav">
            <div id="brand">
                <a href="#">BookArt</a>
            </div>
            <div id="collapse">
                <span></span>
            </div>
            <div id="links">
                <ul id="nav-list-group">
                    <li class="list-item">
                        <a href="#">
                            Inicio
                        </a>
                    </li>
                    <li class="list-item">
                        <a href="#">
                            Registro
                        </a>
                    </li>
                    <li class="list-item">
                        <a href="#">
                            Login
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </header>


    <main>
        <div class="book-container">

            <h3>
                Últimos libros publicados
            </h3>

            <div class="book-card">
                <img src="img/todo-oscuro-sin-estrellas.jpg" alt="todo-oscuro-sin-estrellas">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/maldad-latente.jpg" alt="maldad-latente">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/inferno.jpg" alt="inferno">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/apocalipsis.jpg" alt="apocalipsis">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/todo-oscuro-sin-estrellas.jpg" alt="todo-oscuro-sin-estrellas">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/maldad-latente.jpg" alt="maldad-latente">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/inferno.jpg" alt="inferno">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/apocalipsis.jpg" alt="apocalipsis">
                <a href="" class="read-more">Leer</a>
            </div>

            <h3>
                Libros mejor puntuados
            </h3>

            <div class="book-card">
                <img src="img/todo-oscuro-sin-estrellas.jpg" alt="todo-oscuro-sin-estrellas">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/maldad-latente.jpg" alt="maldad-latente">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/inferno.jpg" alt="inferno">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/apocalipsis.jpg" alt="apocalipsis">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/todo-oscuro-sin-estrellas.jpg" alt="todo-oscuro-sin-estrellas">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/maldad-latente.jpg" alt="maldad-latente">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/inferno.jpg" alt="inferno">
                <a href="" class="read-more">Leer</a>
            </div>
            <div class="book-card">
                <img src="img/apocalipsis.jpg" alt="apocalipsis">
                <a href="" class="read-more">Leer</a>
            </div>

        </div>
    </main>

    <script src="js/nav.js"></script>
    <script src="js/animations.js"></script>
</body>

</html>

I have a container where there are a list of eight books. The grid has 4 columns and 2 rows, in desktops screens.

    main {
    display: flex;
    justify-content: center;
    align-items: center;
}

main .book-container {
    width: 90%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    padding-top: 1rem;
}

main .book-container h3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    grid-column: span 4;
    grid-row: span 1;
    letter-spacing: 2px;
    font-size: 1.5em;
}

main .book-container .book-card {
    grid-column: span 1;
    grid-row: span 1;
    position: relative;
}

main .book-container .book-card img {
    width: 100%;
    height: 25.93em;
    object-fit: contain;
    display: block;
}

In tablets devices the grid has 3 columns and 2 rows... At least in the code...

tablets devices

main .book-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
    }
    main .book-container .book-card {
        grid-column: span 1;
        grid-row: span 1;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, auto);
        gap: 10px;
    }
    main .book-container .book-card img {
        grid-column: span 1;
        grid-row: 1/1;
    }
    main .book-container .book-card .read-more {
        grid-column: span 1;
        grid-row: 2/2;
        display: flex;
        justify-content: center;
        justify-self: center;
        align-items: center;
        background-color: var(--primaryColor);
        border-radius: 5px;
        padding: 3px 0 3px 0;
        color: #ffffff;
        width: 100%;
    }

Finally, in mobile screens, the grid should have 2 columns and 4 rows, but I have no the expected result...

mobile screens

main .book-container {
    padding-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
}
main .book-container .book-card {
    grid-column: span 1;
    grid-row: span 4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}
main .book-container .book-card img {
    height: 25.93em;
    grid-row: 1/1;
}
main .book-container .book-card .read-more {
    grid-row: 2/2;
    display: flex;
    justify-content: center;
    justify-self: center;
    align-items: center;
    background-color: var(--primaryColor);
    border-radius: 5px;
    padding: 3px 0 3px 0;
    color: #ffffff;
    width: 80%;
}

Here is a CodePen to show all HTML, CSS and JS. There are near 293 lines of CSS so I think it's not correct to put it here.

css-grid css html
1 Answers

There 2 ways to achieve that with the use of a CSS-Grid. As you provided no HTML code I use a minimal reproducible code line that you have to rename as you need.

Option #1: Media queries Media Queries allow you to define different styles depending on different rules like screen-width (be aware of the difference for viewport pixel/hardware pixel and css pixel/pixel that are recognized by CSS in mobile use).

.grid {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 5px;
}

@media only screen 
  and (max-width: 480px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen 
  and (min-width: 481px) {
    .grid {
      grid-template-columns: repeat(4, 1fr);
    }
}

.grid div {
  min-height: 50px;
  border: 1px solid black;
}
<div class="grid">
  <div>Book 1</div>
  <div>Book 2</div>
  <div>Book 3</div>
  <div>Book 4</div>
  <div>Book 5</div>
  <div>Book 6</div>
  <div>Book 7</div>
  <div>Book 8</div>
</div>

Option #2: minmax + auto-fit Here you define a minimum width for the cards and use minmax and auto-fill to fit as many cards as the screen fit into one row. With the declared minimum width. Every card that would cause an overflow will be pushed into the next row while not wasting any space.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) );
  grid-auto-rows: auto;
  grid-gap: 5px;
}

.grid div {
  min-height: 50px;
  border: 1px solid black;
}
<div class="grid">
  <div>Book 1</div>
  <div>Book 2</div>
  <div>Book 3</div>
  <div>Book 4</div>
  <div>Book 5</div>
  <div>Book 6</div>
  <div>Book 7</div>
  <div>Book 8</div>
</div>

user_140724200
Related