使用网格时的响应式布局 [英] Responsive Layout when using grid
问题描述
该网站设计为有 6 个大方块,每行 3 个,呈网格布局.
我正在尝试使其具有响应性,因此如果有人缩放网站会适应......它确实如此,但方式很糟糕.
我希望缩放时正方形的位置不同;如果现在它们每行 3 个,我希望它们每行 2 个,如果缩放足够,最后每行 1 个.取而代之的是,正方形缩小了它们的宽度以适应.
/*///////////GENERAL////////////* {边距:0px;填充:0px;box-sizing: 边框框;}/*////////////头文件///////////*/标题{文本对齐:居中;填充:10px;底边距:20px;边框底部:1px纯黑色;}#HeaderContainer {最大宽度:1334px;左边距:自动;右边距:自动;显示:网格;网格模板列:重复(1,1fr 2fr 1fr);网格自动行:minmax(20px,自动);}标题 >div >p{填充:15px;字体大小:20px;字体粗细:更轻;字体系列:Helvetica、Arial、Sans-serif;网格列:2/3;最大宽度:980px;}/*////////////主要部分///////////*/#MainSectionContainer {左边距:自动;右边距:自动;最大宽度:1000px;背景:白色;}部分 {显示:网格;网格模板列:重复(3,1fr);网格自动行:minmax(150px,自动);间隙:10px;}.SectionBox {最小宽度:324px,自动;显示:网格;对齐内容:居中;对齐内容:居中;边框半径:30px;边框:2px纯黑色;字体系列:Helvetica、Arial、Sans-serif;}#照片 {网格行:1/3;}#web {网格行:1/3;}#编码{网格行:1/3;}#简历 {网格行:3/5;}#关于 {网格行:3/5;}#接触 {网格行:3/5;}
<头><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="MyPortfolio" content="MyPortfolio"/><link rel="stylesheet" href="StylesMainPage.css"/>头部><身体><标题><div id="HeaderContainer"><p>欢迎使用我的作品集</p>
</标题><div id="MainSectionContainer"><部分><p id="photo" class="SectionBox">摄影</p><p id="web" class="SectionBox">网页设计</p><p id="coding" class="SectionBox">CODING</p><p id="cv" class="SectionBox">简历</p><p id="about" class="SectionBox">关于我</p><p id="contact" class="SectionBox">CONTACT</p></节>
</html>
您可能需要 auto-fit
和 auto-flow
下面可能的例子,
或https://codepen.io/gc-nomade/pen/mdeYpWK 最大列数设置为 3
/*///////////GENERAL////////////*{边距:0px;填充:0px;框尺寸:边框框;}/*////////////头文件///////////*/标题{文本对齐:居中;填充:10px;底边距:20px;边框底部:1px纯黑色;}#HeaderContainer{最大宽度:1334px;左边距:自动;右边距:自动;显示:网格;网格模板列:重复(1,1fr 2fr 1fr);网格自动行:minmax(20px,自动);}标题 >div >p{填充:15px;字体大小:20px;字体粗细:更轻;字体系列:Helvetica、Arial、Sans-serif;网格列:2/3;最大宽度:980px;}/*////////////主要部分///////////*/#MainSectionContainer{左边距:自动;右边距:自动;最大宽度:1000px;背景:白色;}部分{显示:网格;网格模板列:重复(自动适应,minmax(200px,1fr));网格自动行:minmax(150px,自动);间隙:10px;}.SectionBox{最小宽度:324px,自动;显示:网格;对齐内容:居中;对齐内容:居中;边框半径:30px;边框:2px纯黑色;字体系列:Helvetica、Arial、Sans-serif;}#照片{}#网络{}#编码{}#简历{}#关于{}#接触{}/*/////////IE11 替代方案///////////////////////////部分{显示:-ms-grid;-ms-grid-columns:1fr 10px 1fr 10px 1fr;-ms-grid-rows:自动 10px 自动;}.SectionBox{最小高度:150px;显示:-ms-flexbox;弹性方向:列;对齐项目:居中;}#照片{-ms-grid-row: 1;-ms-grid-column: 1;}#网络{-ms-grid-row: 1;-ms-grid-column: 3;}#编码{-ms-grid-row: 1;-ms-grid-column: 5;}#简历{-ms-grid-row: 3;-ms-grid-column: 1;}#关于{-ms-grid-row: 3;-ms-grid-column: 3;}#接触{-ms-grid-row: 3;-ms-grid-column: 5;}
<头><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="MyPortfolio" content="MyPortfolio"><link rel="stylesheet" href="StylesMainPage.css">头部><身体><标题><div id="HeaderContainer"><p>欢迎使用我的作品集</p>
</标题><div id="MainSectionContainer"><部分><p id="photo" class="SectionBox">摄影</p><p id="web" class="SectionBox">网页设计</p><p id="coding" class="SectionBox">CODING</p><p id="cv" class="SectionBox">简历</p><p id="about" class="SectionBox">关于我</p><p id="contact" class="SectionBox">CONTACT</p></节>
</html>