文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS网格和响应式设计的问题

问CSS网格和响应式设计的问题
EN

Stack Overflow用户
提问于 2020-11-14 00:50:07
回答 1查看 81关注 0票数 2

我正在制作一个“图书社交媒体”，我在响应式设计方面遇到了问题

​

下面是HTML的代码：

代码语言：javascript
复制
    <!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>

我有一个容器，里面有八本书的列表。在桌面屏幕中，网格有4列和2行。

代码语言：javascript
复制
    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;
}

在平板设备中，网格有3列和2行...至少在代码中..。

​

​

代码语言：javascript
复制
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%;
    }

最后，在移动屏幕中，网格应该有2列4行，但我没有得到预期的结果……

​

​

代码语言：javascript
复制
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%;
}

这是一个显示所有超文本标记语言、CSS和JS的CodePen。CSS有将近293行，所以我认为把它放在这里是不正确的。

html
css
css-grid
EN

回答 1

Stack Overflow用户

发布于 2020-11-14 02:43:23

有两种方法可以使用CSS-Grid来实现这一点。因为您没有提供HTML代码，所以我使用了一个最小的可重现代码行，您必须根据需要重命名它。

选项#1:媒体查询媒体查询允许您根据不同的规则定义不同的样式，如屏幕宽度(注意在移动使用中css识别的视口像素/硬件像素和CSS像素/像素的区别)。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

选项#2: minmax + auto-fit在这里，您可以定义卡片的最小宽度，并使用minmax和auto-fill将与屏幕大小相同的卡片放入一行。具有声明的最小宽度。每一张会导致溢出的卡片都会被推入下一行，而不会浪费任何空间。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64824814

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档