HTML+CSS：未来属于CSS

效果演示

一个带���不同背景颜色的网格布局，其中一些元素可能会更大或者字体更大。

Code

                                The                                                                                            Future                                                                                                                                                                                        Belongs                                                                                                                                                                    to                                                                                                                                                                                                                                                                                        CSS                                                                                                                                                                                                                                                                                                                                            Made with love,
 CSS Grid,
A little flexbox,
Sass, and
position: sticky                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

main p:nth-child(1) {    background: #609f26;}main p:nth-child(2) {    background: #44ae4d;}main p:nth-child(3) {    background: #3189f4;}main p:nth-child(4) {    background: #72d7c6;}main p:nth-child(5) {    background: #287ae0;}main p:nth-child(6) {    background: #95ab10;}main p:nth-child(7) {    background: #f36c62;}main p:nth-child(8) {    background: #214347;}main p:nth-child(9) {    background: #8dd25e;}main p:nth-child(10) {    background: #633362;}main p:nth-child(11) {    background: #2e2f51;}main p:nth-child(12) {    background: #23cd08;}main p:nth-child(13) {    background: #3f8d7f;}main p:nth-child(14) {    background: #3e7e09;}main p:nth-child(15) {    background: #329525;}main p:nth-child(16) {    background: #bd3b4d;}main p:nth-child(17) {    background: #cb6d80;}main p:nth-child(18) {    background: #22c756;}main p:nth-child(19) {    background: #a44e1a;}main p:nth-child(20) {    background: #8a406f;}main p:nth-child(21) {    background: #985273;}main p:nth-child(22) {    background: #499681;}main p:nth-child(23) {    background: #f441c6;}main p:nth-child(24) {    background: #1d7c78;}main p:nth-child(25) {    background: #172d75;}main p:nth-child(26) {    background: #0676ee;}main p:nth-child(27) {    background: #09d155;}main p:nth-child(28) {    background: #d5fbe7;}main p:nth-child(29) {    background: #0f3e73;}main p:nth-child(30) {    background: #a3d1f0;}main p:nth-child(31) {    background: #9771b4;}main p:nth-child(32) {    background: #06dc25;}main p:nth-child(33) {    background: #43e4b8;}main p:nth-child(34) {    background: #bbb138;}main p:nth-child(35) {    background: #b368b2;}main p:nth-child(36) {    background: #0d5b3d;}main p:nth-child(37) {    background: #a34e1c;}main p:nth-child(38) {    background: #9b86b4;}main p:nth-child(39) {    background: #e05322;}main p:nth-child(40) {    background: #109e9e;}main p:nth-child(41) {    background: #3495c2;}main p:nth-child(42) {    background: #95fc29;}main p:nth-child(43) {    background: #99bd29;}main p:nth-child(44) {    background: #7e701c;}main p:nth-child(45) {    background: #667dbc;}main p:nth-child(46) {    background: #a63266;}main p:nth-child(47) {    background: #5a8aa0;}main p:nth-child(48) {    background: #5cb83b;}main p:nth-child(49) {    background: #d292c8;}main p:nth-child(50) {    background: #23dbed;}main p:nth-child(51) {    background: #af140f;}main p:nth-child(52) {    background: #d47368;}main p:nth-child(53) {    background: #d838bc;}main p:nth-child(54) {    background: #b65140;}main p:nth-child(55) {    background: #583a5c;}main p:nth-child(56) {    background: #cc4fb2;}main p:nth-child(57) {    background: #1e92b3;}main p:nth-child(58) {    background: #b4ed4b;}main p:nth-child(59) {    background: #67c438;}main p:nth-child(60) {    background: #a396ff;}main p:nth-child(61) {    background: #330bb9;}main p:nth-child(62) {    background: #1bb316;}main p:nth-child(63) {    background: #49b36b;}main p:nth-child(64) {    background: #ab9434;}main p:nth-child(65) {    background: #16ddec;}main p:nth-child(66) {    background: #e828e8;}main p:nth-child(67) {    background: #4280ae;}main p:nth-child(68) {    background: #1d1961;}main p:nth-child(69) {    background: #694bab;}main p:nth-child(70) {    background: #b657c0;}main p:nth-child(71) {    background: #ed10c2;}main p:nth-child(72) {    background: #b3208c;}main p:nth-child(73) {    background: #95f3d1;}main p:nth-child(74) {    background: #d3b28c;}main p:nth-child(75) {    background: #7664d8;}main p:nth-child(76) {    background: #6f7909;}main p:nth-child(77) {    background: #ebb659;}main p:nth-child(78) {    background: #39348f;}main p:nth-child(79) {    background: #3a9fa5;}main p:nth-child(80) {    background: #e1950f;}main p:nth-child(81) {    background: #86d4ad;}main p:nth-child(82) {    background: #a79a10;}main p:nth-child(83) {    background: #44e664;}main p:nth-child(84) {    background: #40b4f1;}main p:nth-child(85) {    background: #5bb965;}main p:nth-child(86) {    background: #3ef748;}main p:nth-child(87) {    background: #7e3cad;}main p:nth-child(88) {    background: #2ca6fc;}main p:nth-child(89) {    background: #b2df12;}main p:nth-child(90) {    background: #db231d;}main p:nth-child(91) {    background: #07e252;}main p:nth-child(92) {    background: #22f008;}main p:nth-child(93) {    background: #46629f;}main p:nth-child(94) {    background: #d42042;}main p:nth-child(95) {    background: #6d1f0d;}main p:nth-child(96) {    background: #39af16;}main p:nth-child(97) {    background: #85a477;}main p:nth-child(98) {    background: #fdc14f;}main p:nth-child(99) {    background: #fb16e5;}main p:nth-child(100) {    background: #14d982;}main p:nth-child(101) {    background: #d1491a;}main p:nth-child(102) {    background: #7406e1;}main p:nth-child(103) {    background: #8c753f;}main p:nth-child(104) {    background: #4a5643;}main p:nth-child(105) {    background: #b20739;}main p:nth-child(106) {    background: #b1e947;}main p:nth-child(107) {    background: #ce6090;}main p:nth-child(108) {    background: #106978;}main p:nth-child(109) {    background: #ad623b;}main p:nth-child(110) {    background: #e26c1d;}main p:nth-child(111) {    background: #315a1f;}main p:nth-child(112) {    background: #d4e099;}main p:nth-child(113) {    background: #8dda17;}main p:nth-child(114) {    background: #fc2b05;}main p:nth-child(115) {    background: #63f2b0;}main p:nth-child(116) {    background: #4f0ebb;}main p:nth-child(117) {    background: #f61ade;}main p:nth-child(118) {    background: #841d36;}main p:nth-child(119) {    background: #463695;}main p:nth-child(120) {    background: #dbbc66;}main p:nth-child(121) {    background: #40ba09;}main p:nth-child(122) {    background: #402f9c;}main p:nth-child(123) {    background: #c76733;}main p:nth-child(124) {    background: #e5aeff;}main p:nth-child(125) {    background: #c413ac;}main p:nth-child(126) {    background: #c4ac0e;}main p:nth-child(127) {    background: #f4135a;}main p:nth-child(128) {    background: #a63579;}main p:nth-child(129) {    background: #eceed5;}main p:nth-child(130) {    background: #ab5804;}main p:nth-child(131) {    background: #c14fd9;}main p:nth-child(132) {    background: #a350d5;}main p:nth-child(133) {    background: #a3d0b5;}main p:nth-child(134) {    background: #30be02;}main p:nth-child(135) {    background: #69521b;}main p:nth-child(136) {    background: #42434e;}main p:nth-child(137) {    background: #fae3ba;}main p:nth-child(138) {    background: #3dc977;}main p:nth-child(139) {    background: #64bd93;}main p:nth-child(140) {    background: #7f7b23;}main p:nth-child(141) {    background: #4c4e60;}main p:nth-child(142) {    background: #4289d5;}main p:nth-child(143) {    background: #3eed75;}main p:nth-child(144) {    background: #5b7b3c;}main p:nth-child(145) {    background: #b481a1;}main p:nth-child(146) {    background: #c3d136;}main p:nth-child(147) {    background: #d501a7;}main p:nth-child(148) {    background: #70a822;}main p:nth-child(149) {    background: #592ad3;}main p:nth-child(150) {    background: #38ad76;}main p:nth-child(151) {    background: #781acb;}main p:nth-child(152) {    background: #d13297;}main p:nth-child(153) {    background: #71a0da;}main p:nth-child(154) {    background: #87b22e;}main p:nth-child(155) {    background: #8825fd;}main p:nth-child(156) {    background: #29aba1;}main p:nth-child(157) {    background: #09ecf9;}main p:nth-child(158) {    background: #98bd01;}main p:nth-child(159) {    background: #52d584;}main p:nth-child(160) {    background: #415d07;}main p:nth-child(161) {    background: #589d1a;}main p:nth-child(162) {    background: #286d85;}main p:nth-child(163) {    background: #07fc58;}main p:nth-child(164) {    background: #26d167;}main p:nth-child(165) {    background: #278111;}main p:nth-child(166) {    background: #caacfd;}main p:nth-child(167) {    background: #25252d;}main p:nth-child(168) {    background: #477213;}main p:nth-child(169) {    background: #9e3806;}main p:nth-child(170) {    background: #de7efd;}main p:nth-child(171) {    background: #74115b;}main p:nth-child(172) {    background: #0c2d7e;}main p:nth-child(173) {    background: #fe9da8;}main p:nth-child(174) {    background: #0f5a93;}main p:nth-child(175) {    background: #313f9f;}main p:nth-child(176) {    background: #a74edc;}main p:nth-child(177) {    background: #9b693b;}main p:nth-child(178) {    background: #49fba0;}main p:nth-child(179) {    background: #efda58;}main p:nth-child(180) {    background: #013785;}main p:nth-child(181) {    background: #5926c1;}main p:nth-child(182) {    background: #59857f;}main p:nth-child(183) {    background: #c46df0;}main p:nth-child(184) {    background: #80700d;}main p:nth-child(185) {    background: #41f093;}main p:nth-child(186) {    background: #a3665b;}main p:nth-child(187) {    background: #e1eb7f;}main p:nth-child(188) {    background: #7c7a32;}main p:nth-child(189) {    background: #f52028;}main p:nth-child(190) {    background: #cc4184;}main p:nth-child(191) {    background: #900e5e;}main p:nth-child(192) {    background: #daa950;}main p:nth-child(193) {    background: #7e238f;}main p:nth-child(194) {    background: #e12f4a;}main p:nth-child(195) {    background: #f3ab17;}main p:nth-child(196) {    background: #fa2e33;}main p:nth-child(197) {    background: #729ef2;}main p:nth-child(198) {    background: #e33e70;}main p:nth-child(199) {    background: #2922f4;}main p:nth-child(200) {    background: #41f3e9;}main p:nth-child(201) {    background: #952c17;}main p:nth-child(202) {    background: #f4076d;}main p:nth-child(203) {    background: #bae804;}main p:nth-child(204) {    background: #a48792;}main p:nth-child(205) {    background: #aa5cd8;}main p:nth-child(206) {    background: #d570ed;}main p:nth-child(207) {    background: #bc4c2a;}main p:nth-child(208) {    background: #9c166d;}main p:nth-child(209) {    background: #2a3262;}main p:nth-child(210) {    background: #e1f7b8;}main p:nth-child(211) {    background: #08a31f;}main p:nth-child(212) {    background: #0e88c5;}main p:nth-child(213) {    background: #1cfdd6;}main p:nth-child(214) {    background: #f9eacb;}main p:nth-child(215) {    background: #0687eb;}main p:nth-child(216) {    background: #5c959c;}main p:nth-child(217) {    background: #e689af;}main p:nth-child(218) {    background: #a5af79;}main p:nth-child(219) {    background: #0471af;}main p:nth-child(220) {    background: #96708d;}main p:nth-child(221) {    background: #b15a6a;}main p:nth-child(222) {    background: #55ae28;}main p:nth-child(223) {    background: #b6d9fe;}main p:nth-child(224) {    background: #1946de;}main p:nth-child(225) {    background: #3a878f;}main p:nth-child(226) {    background: #df31f6;}main p:nth-child(227) {    background: #507e13;}main p:nth-child(228) {    background: #26a1be;}main p:nth-child(229) {    background: #cc0af7;}main p:nth-child(230) {    background: #6dee81;}main p:nth-child(231) {    background: #265df0;}main p:nth-child(232) {    background: #abe2c3;}main p:nth-child(233) {    background: #9cef27;}main p:nth-child(234) {    background: #1af9be;}main p:nth-child(235) {    background: #f29a7b;}main p:nth-child(236) {    background: #74312e;}main p:nth-child(237) {    background: #9e10d4;}main p:nth-child(238) {    background: #bb4297;}main p:nth-child(239) {    background: #4b4e09;}main p:nth-child(240) {    background: #b9a2a2;}main p:nth-child(241) {    background: #123327;}main p:nth-child(242) {    background: #d206a7;}main p:nth-child(243) {    background: #e6e04c;}main p:nth-child(244) {    background: #4e972a;}main p:nth-child(245) {    background: #2043c6;}main p:nth-child(246) {    background: #7389e6;}main p:nth-child(247) {    background: #34f46e;}main p:nth-child(248) {    background: #8cf5cc;}main p:nth-child(249) {    background: #5690b0;}main p:nth-child(250) {    background: #0d0bc5;}main p:nth-child(251) {    background: #ac9fde;}main p:nth-child(252) {    background: #26bac0;}main p:nth-child(253) {    background: #a7e1d7;}main p:nth-child(254) {    background: #8582aa;}main p:nth-child(255) {    background: #7cb35c;}main p:nth-child(256) {    background: #eb6c0f;}main p:nth-child(257) {    background: #3523aa;}main p:nth-child(258) {    background: #a2a7e4;}main p:nth-child(259) {    background: #cc664c;}main p:nth-child(260) {    background: #9911c7;}main p:nth-child(261) {    background: #69652a;}main p:nth-child(262) {    background: #372085;}main p:nth-child(263) {    background: #84ace2;}main p:nth-child(264) {    background: #d7a513;}main p:nth-child(265) {    background: #7c23f5;}main p:nth-child(266) {    background: #c6a8dd;}main p:nth-child(267) {    background: #30f0c9;}main p:nth-child(268) {    background: #0470f6;}main p:nth-child(269) {    background: #d3f69a;}main p:nth-child(270) {    background: #81629d;}main p:nth-child(271) {    background: #bd59ed;}main p:nth-child(272) {    background: #74bf40;}main p:nth-child(273) {    background: #e5d49b;}main p:nth-child(274) {    background: #99a664;}main p:nth-child(275) {    background: #32f0ac;}main p:nth-child(276) {    background: #378307;}main p:nth-child(277) {    background: #d37665;}main p:nth-child(278) {    background: #685c25;}main p:nth-child(279) {    background: #084d99;}main p:nth-child(280) {    background: #140d5a;}main p:nth-child(281) {    background: #fe1164;}main p:nth-child(282) {    background: #f1dc97;}main p:nth-child(283) {    background: #0d4295;}main p:nth-child(284) {    background: #5fa8e6;}main p:nth-child(285) {    background: #b4b05c;}main p:nth-child(286) {    background: #903e40;}main p:nth-child(287) {    background: #0480ef;}main p:nth-child(288) {    background: #54af6d;}main p:nth-child(289) {    background: #41d2cf;}main p:nth-child(290) {    background: #c689ac;}main p:nth-child(291) {    background: #eff86e;}main p:nth-child(292) {    background: #ff1a54;}main p:nth-child(293) {    background: #293375;}main p:nth-child(294) {    background: #d8d0f0;}main p:nth-child(295) {    background: #afee95;}main p:nth-child(296) {    background: #87af03;}main p:nth-child(297) {    background: #f2027a;}main p:nth-child(298) {    background: #132c50;}main p:nth-child(299) {    background: #91b767;}main p:nth-child(300) {    background: #105e5a;}main p:nth-child(301) {    background: #dd62f3;}main p:nth-child(302) {    background: #aad665;}main p:nth-child(303) {    background: #b2529d;}main p:nth-child(304) {    background: #ab6348;}main p:nth-child(305) {    background: #c46db9;}main p:nth-child(306) {    background: #87880e;}main p:nth-child(307) {    background: #bddb0e;}main p:nth-child(308) {    background: #575185;}main p:nth-child(309) {    background: #66e3ec;}main p:nth-child(310) {    background: #9f7111;}main p:nth-child(311) {    background: #df4c5e;}main p:nth-child(312) {    background: #e84d5a;}main p:nth-child(313) {    background: #1e37e6;}main p:nth-child(314) {    background: #e80aac;}main p:nth-child(315) {    background: #3dd5ed;}main p:nth-child(316) {    background: #bf10a7;}main p:nth-child(317) {    background: #58c492;}main p:nth-child(318) {    background: #59f87f;}main p:nth-child(319) {    background: #c2f308;}main p:nth-child(320) {    background: #95847d;}main p:nth-child(321) {    background: #0469be;}main p:nth-child(322) {    background: #9f9bd0;}main p:nth-child(323) {    background: #526610;}main p:nth-child(324) {    background: #e4a475;}main p:nth-child(325) {    background: #c92c5b;}main p:nth-child(326) {    background: #ff618f;}main p:nth-child(327) {    background: #32ef62;}main p:nth-child(328) {    background: #a62327;}main p:nth-child(329) {    background: #a5b241;}main p:nth-child(330) {    background: #bdcf50;}main p:nth-child(331) {    background: #36598b;}main p:nth-child(332) {    background: #4426c1;}main p:nth-child(333) {    background: #52d20e;}main p:nth-child(334) {    background: #789bd3;}main p:nth-child(335) {    background: #1279d0;}main p:nth-child(336) {    background: #683ffb;}main p:nth-child(337) {    background: #2fc9ef;}main p:nth-child(338) {    background: #802fe8;}main p:nth-child(339) {    background: #f16c2e;}main p:nth-child(340) {    background: #36e5b0;}main p:nth-child(341) {    background: #b6c73d;}main p:nth-child(342) {    background: #75a267;}main p:nth-child(343) {    background: #b429ee;}main p:nth-child(344) {    background: #d34fd5;}main p:nth-child(345) {    background: #867f9b;}main p:nth-child(346) {    background: #97c410;}main p:nth-child(347) {    background: #eb999c;}main p:nth-child(348) {    background: #3c1a7a;}main p:nth-child(349) {    background: #46e271;}main p:nth-child(350) {    background: #0ee773;}main p:nth-child(351) {    background: #2f73e9;}main p:nth-child(352) {    background: #a7ae90;}main p:nth-child(353) {    background: #23abf5;}main p:nth-child(354) {    background: #c8114e;}main p:nth-child(355) {    background: #0cffc2;}main p:nth-child(356) {    background: #061329;}main p:nth-child(357) {    background: #1b6cef;}main p:nth-child(358) {    background: #8d880e;}main p:nth-child(359) {    background: #aa9acc;}main p:nth-child(360) {    background: #99fbae;}main p:nth-child(361) {    background: #3614cb;}main p:nth-child(362) {    background: #501ee7;}main p:nth-child(363) {    background: #17e3c3;}main p:nth-child(364) {    background: #04a25d;}main p:nth-child(365) {    background: #67590e;}main p:nth-child(366) {    background: #437bb5;}main p:nth-child(367) {    background: #0f6743;}main p:nth-child(368) {    background: #79fb89;}main p:nth-child(369) {    background: #8b2a57;}main p:nth-child(370) {    background: #b80c6a;}main p:nth-child(371) {    background: #faf7ae;}main p:nth-child(372) {    background: #cb217c;}main p:nth-child(373) {    background: #9d8be8;}main p:nth-child(374) {    background: #7ea5fc;}main p:nth-child(375) {    background: #e169f1;}main p:nth-child(376) {    background: #322ac0;}main p:nth-child(377) {    background: #32d725;}main p:nth-child(378) {    background: #78f7a5;}main p:nth-child(379) {    background: #452124;}main p:nth-child(380) {    background: #2a0ce8;}main p:nth-child(381) {    background: #264c35;}main p:nth-child(382) {    background: #204b9a;}main p:nth-child(383) {    background: #0caa27;}main p:nth-child(384) {    background: #26bab2;}main p:nth-child(385) {    background: #ddc0a1;}main p:nth-child(386) {    background: #504eff;}main p:nth-child(387) {    background: #de63cf;}main p:nth-child(388) {    background: #e569ae;}main p:nth-child(389) {    background: #27de9b;}main p:nth-child(390) {    background: #482e8e;}main p:nth-child(391) {    background: #8338cd;}main p:nth-child(392) {    background: #208813;}main p:nth-child(393) {    background: #d6e16d;}main p:nth-child(394) {    background: #63e5a7;}main p:nth-child(395) {    background: #bccd0e;}main p:nth-child(396) {    background: #7e0305;}main p:nth-child(397) {    background: #923938;}main p:nth-child(398) {    background: #0fa906;}main p:nth-child(399) {    background: #6807d3;}main p:nth-child(400) {    background: #4a0d91;}/* 为每个 p 元素设置不同的背景颜色 */body {    margin: 1vw 0 0 1vw; /* 设置 body 元素的外边距 */    color: white; /* 设置文字颜色为白色 */    font-weight: bold; /* 设置文字加粗 */    font-size: 40px; /* 设置文字大小为 40px */    text-shadow: 1px 2px white; /* 设置文字阴影效果 */}main {    width: 100%; /* 设置 main 元素宽度为 100% */    margin: auto; /* 居中显示 */    display: grid; /* 使用网格布局 */    grid-template-columns: repeat(8, 1fr); /* 设置 8 列等宽 */}p {    box-sizing: border-box; /* 设置盒模型为边框盒模型 */    border-right: 1vw solid #fff; /* 设置右边框为 1vw 宽的白色实线 */    border-bottom: 1vw solid #fff; /* 设置下边框为 1vw 宽的白色实线 */    width: 100%; /* 设置宽度为 100% */    min-height: 12.5vw; /* 设置最小高度为 12.5vw */    display: flex; /* 使用弹性布局 */    justify-content: center; /* 水平居中 */    align-items: center; /* 垂直居中 */}p:not(:empty) {    position: sticky; /* 设置定位为粘性定位 */    top: 0; /* 粘性定位在顶部 */}p:not(:empty).big {    top: 12.5vw; /* 如果有 big 类，则向下偏移 12.5vw */}.big {    grid-column-end: span 2; /* 跨越 2 列 */    grid-row-end: span 2; /* 跨越 2 行 */}.extrabig {    grid-column-end: span 3; /* 跨越 3 列 */    grid-row-end: span 3; /* 跨越 3 行 */}.superbig {    grid-column-end: span 4; /* 跨越 4 列 */    grid-row-end: span 4; /* 跨越 4 行 */    font-size: 2em; /* 设置字体大小为 2em */}