声明栅格系统的容器:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article{
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:repeat(3,1fr);
- grid-template-columns:repeat(3,1fr);
- }
- div{
- width:100px;
- height:100px;
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- <div>7</div>
- <div>8</div>
- <div>9</div>
- </article>
-
- </body>
- </html>

栅格绘制基础知识:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article:nth-of-type(1){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:100px 100px 100px;
- grid-template-columns:100px 100px 100px;
- }
- article>div{
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
- article:nth-of-type(2){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:50% 50%;
- grid-template-columns:20% 20% 20% 20% 20%;
- }
- article>section{
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- <div>7</div>
- <div>8</div>
- <div>9</div>
- </article>
-
- <hr>
-
- <article>
- <section>1</section>
- <section>2</section>
- <section>3</section>
- <section>4</section>
- <section>5</section>
- <section>6</section>
- <section>7</section>
- <section>8</section>
- <section>9</section>
- <section>10</section>
- </article>
-
- </body>
- </html>

重复绘制栅格结构:

自动填充与按比例划分栅格:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article:nth-of-type(1){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- /* 自动填充 */
- grid-template-rows:repeat(auto-fill,100px);
- grid-template-columns:repeat(auto-fill,100px);
- /* 等比例分成3份 */
- grid-template-rows:repeat(3,1fr);
- grid-template-columns:repeat(3,1fr);
- /* 按比例划分 */
- grid-template-rows:1fr 2fr 3fr;
- grid-template-columns:1fr 2fr 1fr;
- }
- article>div{
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
-
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- <div>7</div>
- <div>8</div>
- <div>9</div>
- </article>
- </body>
- </html>

minmax控制尺寸波动范围:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article:nth-of-type(1){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:repeat(2,minmax(50px,100px));
- grid-template-columns:repeat(5,1fr);
- }
- article>div{
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
-
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- <div>7</div>
- <div>8</div>
- <div>9</div>
- <div>10</div>
- </article>
- </body>
- </html>

用栅格间距控制留白:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article:nth-of-type(1){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:repeat(2,1fr);
- grid-template-columns:repeat(5,1fr);
- /* 行间距 */
- row-gap:10px;
- /* 列间距 */
- column-gap:10px;
- /* 行列间距 */
- gap:10px;
- gap:20px 10px;
- }
- article>div{
- /* padding:10px; */
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
-
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- <div>7</div>
- <div>8</div>
- <div>9</div>
- <div>10</div>
- </article>
- </body>
- </html>

根据栅格线的编号放置元素:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article:nth-of-type(1){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:repeat(3,1fr);
- grid-template-columns:repeat(3,1fr);
- }
- article>div{
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- grid-row-start:1;
- grid-row-end:2;
- grid-column-start:1;
- grid-column-end:4;
- grid-row-start:2;
- grid-row-end:3;
- grid-column-start:1;
- grid-column-end:2;
- grid-row-start:2;
- grid-row-end:3;
- grid-column-start:2;
- grid-column-end:3;
- }
-
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- </article>
- </body>
- </html>

注意:形状只能是矩形,不能是不规则图形
小米界面不规则元素布局:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article:nth-of-type(1){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:repeat(2,1fr);
- grid-template-columns:repeat(2,1fr);
- }
- article>div{
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
- article>div:first-of-type{
- grid-row-start:1;
- grid-row-end:3;
- grid-column-start:1;
- grid-column-end:2;
- }
-
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- </article>
- </body>
- </html>

栅格固定命名放置元素:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="关键词1,关键词2,关键词3">
- <meta name="description" content="网站描述bla bla">
- <title>网站标题</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- article:nth-of-type(1){
- width: 300px;
- height:300px;
- border:1px solid red;
- display:grid;
- grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
- grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
- }
- article>div{
- padding:10px;
- background:pink;
- border:1px solid pink;
- background-clip:content-box;
- box-sizing:border-box;
- }
- article>div:first-of-type{
- grid-row-start:r1-start;
- grid-row-end:r1-end;
- grid-column-start:c2-start;
- grid-column-end:c2-end;
- }
-
- </style>
- </head>
- <body>
- <article>
- <div>1</div>
- </article>
- </body>
- </html>
