和cool一起学前端----Grid 的基本使用

最新推荐文章于 2024-03-07 11:06:28 发布

i'm cool

最新推荐文章于 2024-03-07 11:06:28 发布

阅读量174

点赞数

分类专栏： # css # html 文章标签：前端 css html

本文链接：https://blog.csdn.net/heyoung/article/details/103200491

版权

本文介绍了CSS Grid布局，包括其简介、兼容性和基本使用方法。通过实例展示了如何创建Grid容器，设置列宽、行高、行列间距以及元素的定位。强调了Grid布局在复杂网页设计中的优势，并提醒开发者注意浏览器兼容性问题。

摘要由CSDN通过智能技术生成

Grid布局

简介

之前谈到了 flex 布局，在我看来，这个 Grid 就是加强版的 flex 布局了，简单来说，当你 flex 搞不定的时候，就可以尝试用 Grid，所以 Grid 布局自然而然就要比 flex 布局稍微麻烦点了。

兼容性

下图是 flex 的浏览器的兼容性
flex的主流浏览器的兼容性
下图是grid 的浏览器兼容性

能够很清晰的看到 flex 比 grid 兼容性要好，但是基本主流的浏览器都早早的都已经支持了。
PS:[https://caniuse.com/]大家可以在这个网站上查看css和js 在各个浏览器的兼容性。

Grid 使用

和我一起尝试下小例子吧。

基本使用

<div class="container">
   <div class="item red">红色</div>
   <div class="item orange">橙色</div>
   <div class="item yellow">黄色</div>
   <div class="item blue">蓝色</div