当前位置：首页 > news >正文

【前端】每日一道面试题3：如何实现一个基于CSS Grid的12列自适应布局？

news 来源：原创 2025/7/31 1:32:35

要实现一个基于CSS Grid的12列自适应布局，关键在于利用网格系统的灵活性和响应式设计能力。以下是具体实现步骤及核心代码示例：

一、基础网格容器定义

创建网格容器
使用display: grid将父元素定义为网格容器：
```
.container {display: grid;grid-template-columns: repeat(12, 1fr); /* 12列等宽 */gap: 20px; /* 列间间距 */
}
```
- repeat(12, 1fr)生成12列，每列占可用空间的1/12，实现自适应宽度。
- gap统一设置行列间距，替代传统margin或padding布局。

子元素跨列控制
通过grid-column属性定义子元素占用的列数：

.col-3 { grid-column: span 3; } /* 占3列 */
.col-6 { grid-column: span 6; } /* 占6列 */

或使用命名网格线：

.col-4 { grid-column: 1 / 5; } /* 从第1列到第5列（占4列） */

二、响应式断点处理

通过媒体查询适配不同屏幕尺寸：

@media (max-width: 768px) {.container {grid-template-columns: repeat(6, 1fr); /* 小屏幕改为6列 */}.col-6 { grid-column: span 3; } /* 原6列元素在小屏占3列 */
}@media (max-width: 480px) {.container {grid-template-columns: repeat(4, 1fr); /* 移动端4列 */}.col-3 { grid-column: span 2; } /* 小屏下占2列 */
}

利用auto-fill或auto-fit可实现动态列数（如卡片布局），但12列系统更适合固定结构。

三、实战案例：圣杯布局

结合12列网格实现经典三栏布局：

<div class="container"><header class="header">Header</header><nav class="sidebar">Sidebar</nav><main class="content">Main Content</main><footer class="footer">Footer</footer>
</div>

.container {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-areas:"header header header header header header header header header header header header""sidebar content content content content content content content content content content content""footer footer footer footer footer footer footer footer footer footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }@media (max-width: 1024px) {.container {grid-template-areas:"header header header header header header header header header header header header""content content content content content content content content content content content content""footer footer footer footer footer footer footer footer footer footer footer footer";}.sidebar { display: none; } /* 小屏隐藏侧边栏 */
}

通过grid-template-areas直观定义布局结构，媒体查询调整响应式表现。

四、关键优化点

间距控制
使用gap替代传统边距，避免额外计算，代码更简洁。

混合单位
结合minmax()实现列宽动态范围：

grid-template-columns: repeat(12, minmax(100px, 1fr)); /* 最小100px，最大自适应 */

对齐方式
通过justify-items和align-items统一子元素对齐，或用justify-self单独调整。

总结

通过CSS Grid的repeat()、fr单位和媒体查询，可高效构建12列自适应布局。此方案兼顾代码简洁性与响应式灵活性，适合构建企业级网页框架（如Bootstrap替代方案）。实际开发中可根据内容复杂度选择是否引入auto-fill动态列或固定列数结构。

【前端】每日一道面试题3：如何实现一个基于CSS Grid的12列自适应布局？

要实现一个基于CSS Grid的12列自适应布局，关键在于利用网格系统的灵活性和响应式设计能力。以下是具体实现步骤及核心代码示例： 一、基础网格容器定义创建网格容器使用display: grid将父元素定义为网格容器： .container {display: grid;gr…...

编程日记 2025/7/31 1:32:35

leetcode 349. Intersection of Two Arrays

题目描述题目限制0 < nums1[i], nums2[i] < 1000，所以可以开辟一个1001个元素的数组来做哈希表。 class Solution { public:vector<int> intersection(vector<int>& nums1, vector<int>& nums2) {vector<int> table(1001,0…...

编程日记 2025/7/31 1:32:32

机器学习 day01

文章目录前言一、机器学习的基本概念二、数据集的加载1.玩具数据集2.联网数据集3.本地数据集三、数据集的划分四、特征提取1.稀疏矩阵与稠密矩阵2.字典列表特征提取3.文本特征提取前言目前我开始学习机器学习部分的相关知识，通过今天的学习，我掌握了…...

编程日记 2025/7/31 1:32:28

C++STL——priority_queue

优先队列前言优先队列仿函数头文件前言本篇主要讲解优先队列及其底层实现。优先队列优先队列的本质就是个堆，其与queue一样，都是容器适配器，不过优先队列是默认为vector实现的。priority_queue的接口优先队列默认为大根堆。仿函数 …...

编程日记 2025/7/29 21:51:46

DS18B20温度传感器

1.基本信息测温范围为一55～ 125℃；3.3/5V的供电电压；-10~85内精度较高； 典型的温度转换时间为 750ms（12 位分辨率）； 输出最小分辨率：0.0625； 采用单总线数据格式&am…...

编程日记 2025/7/30 21:54:05

《Python星球日记》第50天：深度学习概述与环境搭建

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录一、什么是深度学习？它与传统机器学习的区别1. 深度学习的定义2. 深…...

编程日记 2025/7/31 5:21:19

BUUCTF——Cookie is so stable

BUUCTF——Cookie is so stable 进入靶场页面有点熟悉跟之前做过的靶场有点像先简单看一看靶场信息有几个功能点 flag.php 随便输了个admin 根据题目提示应该与cookie有关抓包看看构造payload Cookie: PHPSESSIDef0623af2c1a6d2012d57f3529427d52; user{{7*7}}有…...

编程日记 2025/7/29 21:51:40

Java 基础面试题

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2025/7/29 21:51:38

bcm5482 phy 场景总结

1，BCM5482是一款双端口10/100/1000BASE-T以太网PHY芯片，支持多种速率和双工模式。其配置主要通过MDIO（Management Data Input/Output）接口进行，MDIO接口用于访问PHY芯片内部的寄存器，从而配置网络速率、双工模式以及其他相关参数。 a,具体以下面两种场景举例 2. 寄存器和…...

编程日记 2025/7/29 21:51:36

小程序多线程实战

在小程序开发中，由于微信小程序的运行环境限制，原生并不支持传统意义上的多线程编程，但可以通过以下两种核心方案实现类似多线程的并发处理效果，尤其在处理复杂计算、避免主线程阻塞时非常关键： 一、官方方案&#xff…...

编程日记 2025/7/31 9:32:32

PPT图表怎么制作？说5款自己使用过的PPT图表制作工具

PPT图表怎么制作？准备一份吸引人的PPT演示文稿时，图表往往能起到画龙点睛的作用。但是，对于很多人来说，制作既美观又专业的图表却不是一件容易的事情。今天，我们就来聊聊如何利用一些优秀的工具制作PPT图表。 1、亿图图…...

编程日记 2025/7/29 21:51:32

渠道销售简历模板范文

模板信息简历范文名称：渠道销售简历模板范文，所属行业：其他 | 职位，模板编号：KRZ3J3 专业的个人简历模板，逻辑清晰，排版简洁美观，让你的个人简历显得更专业，找到好工作…...

编程日记 2025/7/29 21:51:30

数据库实验10

设计性实验 1．实验要求 1.编写函数FsumXXX，1~n（参数）求和； GO CREATE FUNCTION Fsum065 (n INT) RETURNS INT AS BEGIN DECLARE sum INT 0 WHILE n > 0 BEGIN SET sum sum n SET n n - 1 END RETURN sum END …...

编程日记 2025/7/29 21:51:28

C#异步Task,await,async和Unity同步协程

标题 TaskawaitasyncUnity协程 Task Task是声明异步任务的必要关键字，也可以使用Task<>泛型来定义Task的返回值。 await await是用于等待一个Task结束，否则让出该线程控制权，让步给其他线程，直到该Task结束才往下运行。 …...

编程日记 2025/7/29 4:26:06

【ML-Agents】ML-Agents示例项目导入unity报错解决

最近在跑ML-Agents的示例代码，无奈往unity中导入项目后，就出现报错。本文简要描述了各个报错的解决方法。文章目录一、error CS0234: The type or namespace name InputSystem does not exist in the namespace UnityEngine (are you missing an assem…...

编程日记 2025/7/30 7:17:27

【Web前端开发】HTML基础

Web前端开发是用来直接给用户呈现一个一个的网页，主要包含实现用户的结构（HTML）、样式（CSS）、交互（JavaScript）。然而一个软件通常是由后端和前端完成的。可以查阅文档：HTML 教程 (w…...

编程日记 2025/7/31 1:36:58

spark-哈希join介绍

目录 1. Shuffle Join 和 Hash Join 的复杂度1.1 Shuffle Join1.2 Hash Join 2. 哈希算法的原理2.1 什么是哈希算法？2.2 哈希算法的工作原理2.3 常见哈希函数 3. 哈希算法的弊端3.1 哈希碰撞3.2 哈希分布不均匀3.3 哈希值不可逆 4. 哈希碰撞的处理方法4.1 链地址法4…...

编程日记 2025/7/29 21:51:18

计算机网络与多线程同步机制详解

一、IP地址与子网划分在互联网世界中，IP地址就像是每个设备的"门牌号"，它使得数据包能够准确送达目的地。IP地址的划分与管理就像城市的规划，通过合理的子网划分，能够高效地管理网络资源。子网掩码的工作原理子网…...

编程日记 2025/7/29 5:52:50

栈溢出攻击最基本原理

函数在调用的过程中，函数在调用之前呢，会将调用完这个函数之后的下一条命令的地址保存到LR中。 void func() {int a[4];a[6] 100; } 这个函数在用gcc编译的时候是不会报错的，所以我们可以在尝试之后，修改LR的值，让代…...

编程日记 2025/7/29 20:55:11

ChemDraw、InDraw、KingDraw有什么差别?

在化学相关的科研与教学领域，一款好用的结构式编辑器至关重要，ChemDraw因此闻名；但近年来，ChemDraw代理商频繁发送律师函，给学校和企业带来诸多困扰，促使大家纷纷寻找替代软件。InDraw和KingDraw这两款软件…...

编程日记 2025/7/29 20:55:09

NVMe控制器IP设计之接口模块

这是NVMe控制器IP设计系列博客之一，其他的见本博客或csdn搜用户名：tiantianuser。相关视频见B站用户名：专注与守望。接口转换模块负责完成AXI4接口与控制器内部的自定义接口之间的转换工作。接口转换模块的框图如图1所示。图1 接口转换示…...

编程日记 2025/7/29 1:16:35

从0开始学linux韦东山教程第三章问题小结（2）

本人从0开始学习linux，使用的是韦东山的教程，在跟着课程学习的情况下的所遇到的问题的总结,理论虽枯燥但是是基础。摘要关键词：PC远程访问ubuntu配置，ubuntu配置uboot环境，串口控制开发板本文详细介绍以下问题&…...

编程日记 2025/7/31 4:23:23

JS正则表达式介绍（JavaScript正则表达式）

文章目录 JavaScript正则表达式完全指南正则表达式基础元字符与特殊字符基本元字符. - 点号\d - 数字\D - 非数字\w - 单词字符\W - 非单词字符\s - 空白字符\S - 非空白字符正则表达式标志常用标志详解g - 全局匹配i - 忽略大小写m - 多行匹配s - 点号匹配所有字符u - Unicod…...

编程日记 2025/7/29 20:55:02

（51单片机）LCD显示红外遥控相关数字（Delay延时函数）（LCD1602教程）（Int0和Timer0外部中断教程）（IR红外遥控模块教程）

前言： 本次Timer0模块改装了一下，注意！！！今天只是简单的实现一下，明天用次功能显示遥控密码锁演示视频： 在审核源代码： 如上图将9个文放在Keli5 中即可，然后烧录在…...

编程日记 2025/7/29 20:55:00

关于单片机的基础知识（一）

成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】今日分享关于单片机基础知识的相关内容&#xf…...

编程日记 2025/7/29 15:21:38

操作系统学习笔记第2章（竟成）

第 2 章进程管理【考纲内容】 1.进程与线程： (1) 进程 / 线程的基本概念； (2) 进程 / 线程的状态与转换； (3) 线程的实现：内核支持的线程；线程库支持的线程； (4) 进程与线程的组织与控制； (5)…...

编程日记 2025/7/29 15:21:35

《从零开始：构建你的第一个区块链应用》

一、引言区块链技术，这个曾经只在金融领域被广泛讨论的技术，如今已经渗透到各个行业。从供应链管理到智能合约，区块链的应用场景越来越丰富。对于开发者来说，理解区块链的基本原理并构建一个简单的区块链应用，是进入这…...

编程日记 2025/7/29 15:09:24

[思维模式-24]：《本质思考力》-5- 马克思主义毛泽东思想揭示了了人类社会运作的普遍规律有哪些？

目录一、马克思主义毛泽东思想揭示了了人类社会运作的普遍规律有哪些？ 1、生产力与生产关系的辩证运动规律 2、阶级斗争与社会革命规律 3、社会形态演变规律 4、人民群众是历史创造者的规律 5、社会基本矛盾运动规律 6、认识与实践的辩证关系规律二、马克…...

编程日记 2025/7/29 15:21:31

CentOS7.9部署FunASR实时语音识别接口 | 部署商用级别实时语音识别接口FunASR

0. 环境说明本次在云服务器中部署一套实时语音识别接口，基于阿里开源的FunASR。云服务器使用莱卡云，4核心4GB内存50GB存储空间，带宽10Mbps。操作系统使用CentOS7.9 视频演示可以看云服务器中部署实时语音识别接口 | FunASR在云服务器…...

编程日记 2025/7/30 23:30:55

炫酷粒子系统动画实战：Matplotlib实现银河漩涡效果

炫酷粒子系统动画实战：Matplotlib实现银河漩涡效果效果演示：银河粒子漩涡核心代码分析1. 粒子系统初始化2. 动画更新函数3. 渲染优化技巧完整实现代码Matplotlib的动画模块介绍核心类对比核心功能分点注意事项效果演示：银河粒子漩涡动…...

编程日记 2025/7/30 21:17:30

MAD-TD: MODEL-AUGMENTED DATA STABILIZES HIGH UPDATE RATIO RL

ICLR 2025 spotlight paper 构建能够在少量样本下学习出优良策略的深度强化学习（RL）智能体一直是一个极具挑战性的任务。为了提高样本效率，近期的研究尝试在每获取一个新样本后执行大量的梯度更新。尽管这种高更新-数据比（UTD&am…...

编程日记 2025/7/31 14:25:21

机器学习第四讲：无监督学习 → 给无标签积木自由组合，发现隐藏规律

机器学习第四讲：无监督学习 → 给无标签积木自由组合，发现隐藏规律资料取自《零基础学机器学习》。查看总目录：学习大纲关于DeepSeek本地部署指南可以看下我之前写的文章：DeepSeek R1本地与线上满血版部署：超详细…...

编程日记 2025/7/29 9:46:10

Vue 两种导航方式

目录一、声明式导航二、编程式导航三、两句话总结一、声明式导航 1. 传参跳转： <router-link :to"/user?nameCHEEMS&id114514">Query传参 </router-link><router-link :to"/user?参数名1参数值1&参数名2参数值2&a…...

编程日记 2025/7/30 22:49:24

HTTP 的发展史：从前端视角看网络协议的演进

别再让才华被埋没，别再让github 项目蒙尘！github star 请点击 GitHub 在线专业服务直通车GitHub赋能精灵 - 艾米莉，立即加入这场席卷全球开发者的星光革命！若你有快速提升github Star github 加星数的需求，访问taimili…...

编程日记 2025/7/31 13:55:22

Spring 必会之微服务篇（2）

经过上一篇文章的介绍，应该对微服务有了基本的认识，以及为什么要用微服务和微服务要面临的挑战和对应的解决问题，这一期继续聊聊关于微服务的相关知识。服务拆分为什么拆对于大多数的小型项目来说，一般是先采用单体架构，但是随着后面的用户规模变大，业务越来越复杂…...

编程日记 2025/7/29 9:46:04

21.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--身份认证服务拆分规划

从这篇文章开始我们将开始一步一步的拆分现有的单体应用孢子记账项目。按照上一篇文章中的介绍，我们首先把身份认证服务拆分出来。一、功能分析在当前的单体应用中，身份认证服务主要负责用户认证、授权以及角色权限管理等核心功能。在拆分之前&…...

编程日记 2025/7/29 1:11:55

人工智能100问☞第19问：什么是专家系统？

目录一、通俗解释二、专业解析三、权威参考专家系统是基于知识库（存储专家经验与规则）和推理机（模拟专家逻辑判断）的人工智能程序，能在特定领域（如医疗诊断、工业控制）高效解决复杂问题。一、通俗解释专家系统就像个“智能版老师傅…...

编程日记 2025/7/29 9:46:00

AutoGen+Deepseek+chainlit的简单使用

AutoGen 的应用场景 AutoGen 作为一个强大的多智能体协作框架，可用于多种复杂任务： 自动化工作流：构建由多个智能体组成的流水线，例如数据收集、分析、报告生成复杂问题分解：将难题拆解为子任务，分配给不…...

编程日记 2025/7/28 14:54:39

贪心算法专题（Part1）

目录 1. 贪心算法简介 2. 柠檬水找零 3. 将数组和减半的最少操作次数 4. 递增的三元子序列 5. K次取反后最大化的数组和 6. 增减字符串匹配 7. 分发饼干 8. 整数替换 1. 贪心算法简介 2. 柠檬水找零题目链接：860. 柠檬水找零 - 力扣（LeetCode…...

编程日记 2025/7/29 9:45:56

PyTorch API 4 - 分布式通信、分布式张量

文章目录分布式通信包 - torch.distributed后端支持PyTorch 内置的后端选择哪个后端？常见环境变量选择使用的网络接口其他NCCL环境变量基础概念初始化返回类型：boolTCP初始化共享文件系统初始化环境变量初始化方法初始化后操作关闭处理重新初始化组D…...

编程日记 2025/7/29 9:45:53

《类和对象(中)》

引言： 上次我们主要学习了类的相关知识，今天我们就来学习类和对象(中)，今天也会用到之前学习过的东西，可以说是前面知识的结合，较前面会难一点（打个预防针）。一：类的默认成员函数…...

编程日记 2025/7/28 20:46:03

SSH终端登录与网络共享

SSH 是较可靠，专为远程登录会话和其他网络服务提供安全性的协议注意 SSH终端登录的前提是：电脑和板卡都能够通过网络相连接及通信与连接互联网不一样，SSH可以不用互联网，只要电脑和板卡组成一个小型网络即可网络方案如果您…...

编程日记 2025/7/30 21:21:39

n8n系列（5）：LangChain与大语言模型应用

引言 n8n作为一个强大的工作流自动化平台，可以通过集成LangChain框架，为用户提供了便捷地利用OpenAI、Azure OpenAI等大语言模型的能力。本文将深入探讨n8n中的AI集成功能，特别是LangChain节点的使用，以及如何构建智能化的工作流程来解决实际业务问题。 1. n8n的AI集成概…...

编程日记 2025/7/29 9:45:47

springboot3+vue3融合项目实战-大事件文章管理系统-更新用户信息

在一下三个代码处进行修改在UserController里面增加uadate方法 PutMapping ("/update")public Result update(RequestBody Validated User user){userService.update(user);return Result.success();}在userservice中增加update方法 void update(User user); 然…...

编程日记 2025/7/30 22:25:11

20250510-查看 Anaconda 配置的镜像源

打开 Anaconda Prompt 查看 Anaconda 当前配置的镜像源，使用命令 conda config --show channels这将显示当前配置的通道（channels），即镜像源列表。此外，还可以使用 conda config --show命令来显示conda的配置信息&…...

编程日记 2025/7/29 23:16:14

CDGP数据治理主观题评分标准与得分策略

1.数据模型题目评分标准 1）准确理解题目中所描述的业务逻辑和需求得[1分] 2）正确使用模型设计方法，使用信息工程、信息建模集成定义、巴克符号、陈氏符号等其中一种得[1分] 3）正确设计实体和属性，题目中涉及的实体数量为25-30个，10个以内得[2分]，10-20个得[3分]，25个…...

编程日记 2025/7/29 15:21:19

[学习]RTKLib详解：sbas.c与rtcm.c

RTKLib详解：sbas.c与rtcm.c 本文是 RTKLlib详解系列文章的一篇，目前该系列文章还在持续总结写作中，以发表的如下，有兴趣的可以翻阅。 [学习] RTKlib详解：功能、工具与源码结构解析 [学习]RTKLib详解：pntp…...

编程日记 2025/7/29 9:04:57

【基础IO下】磁盘/软硬链接/动静态库

前言： 文件分为内存文件和磁盘文件。磁盘文件是一个特殊的存在，因为磁盘文件不属于冯诺依曼体系，而是位于专门的存储设备中。因此，磁盘文件存在的意义是将文件更好的存储起来，一边后续对文件进行访问。在高效存储磁盘…...

编程日记 2025/7/29 15:21:15

JAVA练习题(1) 卖飞机票

import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scnew Scanner(System.in);System.out.println("请输入飞机的票价：");int pricesc.nextInt();System.out.println("请输入月份：");…...

编程日记 2025/7/29 15:21:13

SpringBoot框架开发网络安全科普系统开发实现

概述基于SpringBoot框架的网络安全科普系统开发指南，该系统集知识科普、案例学习、在线测试等功能于一体，本文将详细介绍系统架构设计、功能实现及技术要点，帮助开发者快速构建专业的网络安全教育平台。主要内容系统功能架构本系统采…...

编程日记 2025/7/29 5:10:14

一、基础网格容器定义

二、响应式断点处理

三、实战案例：圣杯布局

四、关键优化点

总结

相关文章：