前端 css 经典:grid 栅格布局

简介: 前端 css 经典:grid 栅格布局

前言:flex 是一维布局、grid 是二维布局

1. 容器属性

.container {
  width: 500px;
  height: 500px;
  /* 容器的类型为块元素grid还是行内元素inline-grid */
  display: grid;
  border: 1px solid;
 
  /* 设置列和列宽:auto-fill,屏幕每行容纳最多的200px的盒子 */
  grid-template-columns: repeat(auto-fill, 200px);
  /* fr:剩余空间平均后的一等分 */
  /* grid-template-columns: 200px 1fr 2fr 3fr; */
  /* minmax:最大和最小尺寸,如下 最小300px,最大2fr */
  /* grid-template-columns: 1fr 1fr minmax(300px, 2fr) */
  /* auto:宽度自适应 */
  /* grid-template-columns: 100px auto 100px; */
 
  /* 设置 行间距 列间距 */
  grid-gap: 10px 20px;
 
  /* 设置行高:设置每列高度都为200px */
  grid-auto-rows: 200px;
  /* 单独设置每列的行高 */
  /* grid-template-rows: 100px 200px; */
 
  /* 设置区域命名,同子项目里的grid-area使用 */
  grid-template-areas:
    ". header header"
    "sidebar content content";
  // header子项目占了两份
  .header {
    grid-area: header;
  }
 
  // 单元格内容水平位置
  justify-items: start | end | center | stretch;
  // 单元格内容垂直位置
  align-items: start | end | center | stretch;
 
  // 整个内容区域在容器里面的水平位置
  justify-content: start | end | center | stretch | space-around | space-between
    | space-evenly;
  // 整个内容区域的垂直位置
  align-content: start | end | center | stretch | space-around | space-between |
    space-evenly;
}

2. 项目属性

.child {
  // 可以指定网格项目所在的四个边框,分别定位在哪根网格线,从而指定项目的位置
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
 
  // 单元格内容的水平、垂直位置,同justify-items、align-items只作用于单个项目
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}


目录
相关文章
|
3天前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量,用于复杂二维布局。然而,隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
|
3天前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块,简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外,还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局,强调实践和理解核心概念是掌握Flexbox的关键。
|
4天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
前端开发 JavaScript 容器
css实现瀑布流布局
css实现瀑布流布局
|
5天前
|
前端开发 开发者
CSS进阶-CSS3多列布局
【6月更文挑战第14天】CSS3的多列布局简化了复杂布局,提供杂志样式排版。通过`column-*`属性如`column-count`和`column-gap`实现内容分割和列间距控制。常见问题包括内容溢出、列间距不当和兼容性问题。解决方法包括使用`word-break`和`hyphens`处理长单词,灵活设置列宽和列数,以及为旧浏览器提供回退方案。代码示例展示了一个自动平衡列高的两列布局。理解并解决这些问题将帮助开发者更好地利用CSS3多列布局。尽管有兼容性挑战,但它是现代网页设计的重要工具。
|
5天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
18 2
|
6天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
16 0
|
前端开发 容器 JavaScript
CSS Grid布局入门
相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大。未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。
1141 0
|
17小时前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
1天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
21 5

热门文章

最新文章