面试题：CSS grid-template-columns与grid-template-rows专家难度面试题

Question

假设你正在开发一个复杂的电商产品展示页面，使用`grid-template-columns`和`grid-template-rows`实现这样的布局：产品图片占据左上角2x2的网格区域，产品标题横跨第一行剩余3列，产品描述在图片下方，占据3行1列，价格信息在右下角1x1的网格区域。同时，要求在不同设备（桌面、平板、手机）上通过媒体查询灵活调整布局，保证各元素展示合理且美观，并且需要考虑SEO优化和无障碍访问。请详细阐述你的实现思路，并给出核心CSS代码。

Answer 1

实现思路

1. 使用CSS Grid布局：
   • 使用display: grid来创建网格容器。
   • 通过grid - template - columns和grid - template - rows定义网格结构，分别设置列和行的布局。
   • 利用grid - area属性或者网格线来定位各个元素在网格中的位置。
2. 媒体查询：
   • 针对不同设备宽度（桌面、平板、手机）设置不同的网格布局。例如，在手机上，可能将产品图片放大并占据整行，标题和描述等元素也相应调整布局，以适应小屏幕。
3. SEO优化：
   • 使用语义化的HTML标签，如<header>、<main>、<article>、<section>等，有助于搜索引擎理解页面结构。
   • 为图片添加有意义的alt属性，描述图片内容，利于搜索引擎索引和无障碍访问。
4. 无障碍访问：
   • 确保文本有足够的对比度，便于视力障碍用户阅读。
   • 合理设置tabindex属性，保证键盘可访问性，使键盘用户能按逻辑顺序导航页面元素。

核心CSS代码

/* 基础网格布局 */
.product - container {
    display: grid;
    grid - template - columns: repeat(5, 1fr);
    grid - template - rows: repeat(4, 1fr);
    gap: 10px;
}

.product - image {
    grid - column - start: 1;
    grid - column - end: 3;
    grid - row - start: 1;
    grid - row - end: 3;
}

.product - title {
    grid - column - start: 3;
    grid - column - end: 6;
    grid - row - start: 1;
}

.product - description {
    grid - column - start: 1;
    grid - column - end: 2;
    grid - row - start: 3;
    grid - row - end: 6;
}

.product - price {
    grid - column - start: 5;
    grid - column - end: 6;
    grid - row - start: 4;
    grid - row - end: 5;
}

/* 媒体查询 - 平板 */
@media (max - width: 1024px) {
   .product - container {
        grid - template - columns: repeat(4, 1fr);
        grid - template - rows: repeat(3, 1fr);
    }
   .product - image {
        grid - column - start: 1;
        grid - column - end: 3;
        grid - row - start: 1;
        grid - row - end: 2;
    }
   .product - title {
        grid - column - start: 3;
        grid - column - end: 5;
        grid - row - start: 1;
    }
   .product - description {
        grid - column - start: 1;
        grid - column - end: 3;
        grid - row - start: 2;
        grid - row - end: 4;
    }
   .product - price {
        grid - column - start: 4;
        grid - column - end: 5;
        grid - row - start: 3;
        grid - row - end: 4;
    }
}

/* 媒体查询 - 手机 */
@media (max - width: 768px) {
   .product - container {
        grid - template - columns: 1fr;
        grid - template - rows: auto;
    }
   .product - image {
        grid - column - start: 1;
        grid - column - end: 2;
        grid - row - start: 1;
        grid - row - end: 2;
    }
   .product - title {
        grid - column - start: 1;
        grid - column - end: 2;
        grid - row - start: 2;
    }
   .product - description {
        grid - column - start: 1;
        grid - column - end: 2;
        grid - row - start: 3;
    }
   .product - price {
        grid - column - start: 1;
        grid - column - end: 2;
        grid - row - start: 4;
    }
}

在HTML部分，要使用语义化标签：

<div class="product - container">
    <img src="product - image.jpg" alt="产品图片" class="product - image">
    <h1 class="product - title">产品标题</h1>
    <p class="product - description">产品描述内容...</p>
    <span class="product - price">价格信息</span>
</div>