W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: 33% 33% 33%; } </style> </head> <body> <h1>网格示例</h1> <p>将三个 DIV 元素并排对齐。</p> <div class="grid-container"> <div style="background-color:#FFF4A3;"> <h2>伦敦</h2> <p>伦敦是英格兰的首都。</p> <p>伦敦拥有超过 900 万居民。</p> </div> <div style="background-color:#FFC0C7;"> <h2>奥斯陆</h2> <p>奥斯陆是挪威的首都。</p> <p>奥斯陆拥有超过 70 万居民。</p> </div> <div style="background-color:#D9EEE1;"> <h2>罗马</h2> <p>罗马是意大利的首都。</p> <p>罗马拥有超过 400 万居民。</p> </div> </div> </body> </html>