欢迎光临
我的个人博客网站

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

声明栅格系统的容器:

<!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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

 

栅格绘制基础知识:

<!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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

 

重复绘制栅格结构:

<!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:100px;             border:1px solid red;             display:grid;             /* grid-template-rows:50% 50%;             grid-template-columns:20% 20% 20% 20% 20%; */              /* repeat(分几格,每格占百分之多少) */             grid-template-rows:repeat(2,50%);             grid-template-columns:repeat(5,20%);         }         article>section{             padding:10px;             background:pink;             border:1px solid pink;             background-clip:content-box;             box-sizing:border-box;         }          article:nth-of-type(3){             width: 300px;             height:100px;             border:1px solid red;             display:grid;             /* 第一行高100px,第二行高50px。重复2遍 */             grid-template-rows:repeat(2,100px 50px);             grid-template-columns:repeat(5,20%);         }     </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>      <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>         <section>11</section>         <section>12</section>         <section>13</section>         <section>14</section>         <section>15</section>         <section>16</section>         <section>17</section>         <section>18</section>         <section>19</section>         <section>20</section>      </article>  </body> </html>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

 

自动填充与按比例划分栅格:

<!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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

 

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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

 

用栅格间距控制留白:

<!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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

 根据栅格线的编号放置元素:

<!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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

注意:形状只能是矩形,不能是不规则图形

 

小米界面不规则元素布局:

<!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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

 

栅格固定命名放置元素:

<!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>

未来的CSS3布局方式 ,GRID 栅格系统 -cyy

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 未来的CSS3布局方式 ,GRID 栅格系统 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏