CSS19. display - grid - 区域
描述
网格布局允许指定区域，一个区域由单个或多个单元格组成。根据上一节学习的内容，请将"section"设置为网格布局容器，并且生成一个3x3的网格，该网格容器项的宽度、高度都为100px。再给容器添加"grid-template-areas: 'a b c''d e f''g h i'"属性，表示3x3的网格区域划分从左到右、从上到下依次为a、b、c、d、e、f、g、h、i。现在给第一个"article"标签设置"grid-area: e"属性，此时可以看到数字1已经被移动到了最中间的区域，即区域"e"。HTML/CSS/JavaScript 解法, 执行用时: 1711ms, 内存消耗: 77816KB, 提交时间: 2022-02-07
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n section {\n text-align: center;\n display:grid;\n grid-template-columns: repeat(3,1fr);\n grid-template-rows:100px 100px 100px;\n grid-template-areas:'a b c''d e f''g h i';\n \n \n }\n article {\n height: 100px;\n border: 1px solid black;\n }\n article:first-child{\n grid-area:e;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>1</article>\n <article>2</article>\n <article>3</article>\n <article>4</article>\n <article>5</article>\n <article>6</article>\n <article>7</article>\n <article>8</article>\n <article>9</article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77848KB, 提交时间: 2022-01-23
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n section {\n text-align: center;\n display: grid;\n grid-template-rows: 100px 100px 100px;\n grid-template-columns: 100px 100px 100px;\n grid-template-areas:'a b c''d e f''g h i';\n }\n article {\n height: 100px;\n border: 1px solid black;\n }\n article:first-child{\n grid-area: e;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>1</article>\n <article>2</article>\n <article>3</article>\n <article>4</article>\n <article>5</article>\n <article>6</article>\n <article>7</article>\n <article>8</article>\n <article>9</article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77888KB, 提交时间: 2021-12-26
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n section {\n text-align: center;\n width:100px;\n height:100px;\n grid-template-areas: 'a b c''d e f''g h i;\n}\narticle {\n grid-area: e;\n height: 100px;\n border: 1px solid black;\n}\n </style>\n </head>\n <body>\n \t<section>\n <article>1</article>\n <article>2</article>\n <article>3</article>\n <article>4</article>\n <article>5</article>\n <article>6</article>\n <article>7</article>\n <article>8</article>\n <article>9</article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1744ms, 内存消耗: 77772KB, 提交时间: 2022-01-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n section {\n text-align: center;\n display:grid;\n grid-template-rows:100px 100px 100px;\n grid-template-columns:repeat(3,1fr);\n grid-template-areas:'a b c''d e f''g h i';\n grid-gap:10px\n }\n article {\n height: 100px;\n border: 1px solid black;\n }\n article:nth-child(1){\n grid-area:e;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>1</article>\n <article>2</article>\n <article>3</article>\n <article>4</article>\n <article>5</article>\n <article>6</article>\n <article>7</article>\n <article>8</article>\n <article>9</article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1745ms, 内存消耗: 77772KB, 提交时间: 2022-02-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n section {\n text-align: center;\n display:grid;\n grid-template-rows: repeat(3,100px);\n grid-template-columns: repeat(3,100px);\n grid-template-areas:'a b c''d e f''g h i';\n }\n article {\n height: 100px;\n border: 1px solid black;\n }\n article:first-child {\n grid-area: e;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>1</article>\n <article>2</article>\n <article>3</article>\n <article>4</article>\n <article>5</article>\n <article>6</article>\n <article>7</article>\n <article>8</article>\n <article>9</article>\n </section>\n </body>\n</html>","libs":[]}