grid-template-columns:33.33%33.33%33.33%grid-template-rows:33.33%33.33%33.33% 功能函数:repeat() repeat(参数1,参数2)/*参数1 : 重复的次数参数2 : 重复的数值或者重复的模式eg:grid-template-columns:repeat(3,33.33%);等同grid-template-columns:33.33% 33.33% 33.33%*/ auto-fill关键字( 自动填充 ...
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .warpper{ display: grid; border: 3px solid aquamarine; text-align: center; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } div:nth-child(1) { background-color: firebri...
.box{display:grid;/* 定义区域(划分区域) */grid-template-areas:"header header""nav main""nav footer";}header{/* 真正使用区域(注意不是字符串) */grid-area:header;background-color:pink;}nav{grid-area:nav;background-color:purple;}main{grid-area:main;background-color:skyblue;}footer{grid-a...
DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><style>*{padding:0;margin:0;}.grid-container{width:40vw;height:40vh;margin:20pxauto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto1f...
grid-template-rows: 属性值:绝对大小(根据列数或者行数确定值的个数) 例:200px 200px 200px grid-template-columns:200px 200px 200px grid-template-rows:200px 200px 200px 属性值:百分比(根据列数或者行数确定值的个数) 例:33.33% 33.33% 33.33% ...
DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><style>*{padding:0;margin:0;}.grid-container{width:40vw;height:40vh;margin:20px auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto...
grid-template: "sidebar mainA""sidebar mainB"; /* 1列最小为100px最大为1等分 2列为1等分*/ grid-template-columns: minmax(100px, 1fr) 1fr; } .template-5col .left { overflow: hidden; /* 区域划分 left占 sidebar 位*/ grid-area: sidebar; ...
让我们创建创建一个 3×3 的布局,做一个 Tic-Tac-Toe (井字游戏) 棋盘。 首先,我们将写一些 HTML: HTML 代码: 如您所见,.game-board div 是网格容器,而 .box div 是网格项。现在我们将通过 Grid 布局来实现 3×3 布局。 CSS 代码:.game-board { display: grid; grid-template-rows: 200px 200px...
CSS属性 可以看出三列宽度加起来的百分比值为120%,而且wrapper容器并未设置宽度,会一直向上追溯到body元素,这样三列的总宽度已经超过了body的宽度,因此会出现滚动条。 页面效果 grid-template-rows 用于设置网格容器的行属性,其实就相当于行的高度,其特性与grid-template-columns属性类似。
CSS Grid Generated 生成的代码 点击“请给我示例中的代码”就可以查看对应布局生成的 CSS 代码: 代码语言:javascript 复制 .parent{display:grid;grid-template-columns:200px 1fr 1fr 200px;grid-template-rows:100px 1fr 50px;grid-column-gap:20px;grid-row-gap:20px;.div1{grid-area:1/1/2/5;}....