CSS28. 三列布局 - grid
描述
使用grid网格布局实现三列布局，和之前所讲的gird实现双列布局是同样的思想，只是把列数变为了3，高度依然不设置，通过容器项的内容高度自适应撑开整体高度。HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77772KB, 提交时间: 2021-12-30
{"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 .container{\n display: grid;\n grid-template-columns: 100px 1fr 100px;\n }\n .left {\n border: 1px solid black;\n }\n .center {\n border: 1px solid black;\n }\n .right {\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77772KB, 提交时间: 2022-01-29
{"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 .left {\n border: 1px solid black;\n }\n .center {\n border: 1px solid black;\n }\n .right {\n border: 1px solid black;\n } .container{\n display:gird;\n grid-template-columns: 100px auto 100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77900KB, 提交时间: 2022-01-27
{"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 .container{\n display: grid;\n grid-template-columns: 100px auto 100px;\n \n }\n .left {\n border: 1px solid black;\n }\n .center {\n border: 1px solid black;\n }\n .right {\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1750ms, 内存消耗: 77764KB, 提交时间: 2021-12-22
{"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 .left {\n border: 1px solid black;\n }\n .center {\n border: 1px solid black;\n }\n .right {\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1751ms, 内存消耗: 77772KB, 提交时间: 2022-01-06
{"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 .container{\n display: grid;\n grid-template-columns: 100px 1fr 100px;\n }\n .left {\n border: 1px solid black;\n }\n .center {\n border: 1px solid black;\n }\n .right {\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}