- A+
所属分类：Web前端
声明栅格系统的容器：
<!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: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>
自动填充与按比例划分栅格：
<!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>
