首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Grid网格布局入门

(下面的图都以justify-content属性为例,align-content属性的图完全一样,只是将水平方向改成垂直方向。) start – 对齐容器的起始边框。 ?...它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。...上图中,只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。....item-1 { grid-column-start: span 2; } 上面代码表示,1号项目的左边框距离右边框跨越2个网格。 ? 这与下面的代码效果完全一样。...align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。

2.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    grid布局方式的使用「建议收藏」

    它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。...grid-column-start属性:左边框所在的垂直网格线 grid-column-end属性:右边框所在的垂直网格线 grid-row-start属性:上边框所在的水平网格线 grid-row-end...上图中,只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。....item-1 { grid-column-start: span 2; } 上面代码表示,1号项目的左边框距离右边框跨越2个网格。 这与下面的代码效果完全一样。...align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。

    2K10

    万字总结 CSS 布局

    它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。...grid-column-start属性:左边框所在的垂直网格线 grid-column-end属性:右边框所在的垂直网格线 grid-row-start属性:上边框所在的水平网格线 grid-row-end...上图中,只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。....item-1 { grid-column-start: span 2; } 上面代码表示,1号项目的左边框距离右边框跨越2个网格。 这与下面的代码效果完全一样。...align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。

    5.7K20

    图解CSS布局(一)- Grid布局

    指定项目的位置 实现的原理其实是指定项目的四个边框,分别定位在哪根网格线 grid-column-start属性:左边框所在的垂直网格线 grid-column-end属性:右边框所在的垂直网格线 grid-row-start...也可以使用span关键字,来实现占2个网格这样的效果,可以将它理解为跨越的意思 grid-column-end: span 2; 表示的意思是:1号项目的左边框距到右边框跨越了2个网格。...其中的第一行代码,制定了上边框在第1条网格线,下边框在第4条网格线,第二行代码同理。...网格内容排列方式(单个项目) justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。...align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。

    1.8K10

    CSS进阶11-表格table

    开发者可以将表格的视觉格式指定为矩形网格单元格。单元格的行和列可以组织成行组和列组。行,列,行组,列组和单元格可以在它们周围绘制边框(CSS 2.2中有两个边框模型)。...row group占据与其包含的行相同的网格单元格。 column box占用一列或多列网格单元格。Column boxes按照它们出现的顺序彼此相邻放置。...与列一样,背景完全覆盖了来自该行的所有单元格的全部区域,即使它们跨越到行之外,但这种区域差异不会影响背景图像定位。 最顶层包含单元格cells本身。...这允许动态效果删除表格行或列而不强制对表格进行重新布局,以考虑列约束中的潜在变化。 6. 边框 borders 为CSS中的表单元格设置边界有两种不同的模式。...边框以单元格之间的网格线为中心。在奇数个离散单位(屏幕像素,打印机点)的情况下,用户代理必须找到一致的舍入规则。 下表显示了表格的宽度,边框的宽度,填充和单元格宽度如何相互作用。

    6.6K30

    java swing项目桌面软件还是蛮香的,至少有了我自己的桌面软件|Java 开发实战

    今天看了看自己的java swing的程序,感觉写的还不错,但是发现现在遇到一个瓶颈问题,就是jtable的使用,由于一开始概念不理解现在jtable得重新写,之前我吧数据放在jtable上了,但是真正开发的...我需要一个几行几列的表格,至于每个单元格显示的内容就是通过getValueAt这个方法实现的,到这里我们就实现了,jtable的model自定义显示。...datamModel.setList(data);//datamModel.fireTableStructureChanged();datamModel.fireTableRowsInserted(5,6);}else if("删除...$BooleanRenderer"); }源码中就有渲染器专门处理bool类型的,那么我们只需要在getColumnClass进行处理就行了,在我们的bool的单元格返回bool类JTable就会采用...,然后通过JTable提供的方法设定用该渲染器渲染该单元格!

    40210

    每天10个前端小知识 【Day 17】

    c'; 复制代码 上面代码将9个单元格分成a、b、c三个区域 如果某些区域不需要利用,则使用"点"(.)表示 grid-auto-flow 属性 划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格...属性、grid-row-start 属性以及grid-row-end 属性 指定网格项目所在的四个边框,分别定位在哪根网格线,从而指定项目的位置。...grid-column-start 属性:左边框所在的垂直网格线 grid-column-end 属性:右边框所在的垂直网格线 grid-row-start 属性:上边框所在的水平网格线 grid-row-end...,跟justify-items属性的用法完全一致,但只作用于单个项目。...align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目 .item { justify-self: start | end |

    15111

    高级Swing 组件

    当然,你可以建立各种字符串列表,但是你也可以建立包含任意对象的列表,并且完全能够控制它们的显示方式。列表组件的内部结构使它具备了很强的通用性,而且这种内部结构是相当巧妙的。...相反,你必须访问一个列表模型,然后再添加或删除元素。这种操作也是说起来容易做起来难。...参数:list 要绘制其单元格的列表 item 要绘制的项目 index 项目存放在列表模型中时使用的索引 isSelected * 如果设定的单元格被选定,则返回true hasFocus 如果设定的单元格拥有该焦点...对描述插入事件或删除事件的树模型事件进行汇编的具体细节,具有很强的技术性。如果你的树实际上可以进行节点的添加和删除,那么你只需要考虑如何触发这些事件。...selected 如果单元格目前已经被选定 ,则 true hasFocus 如果单元格目前已经被选定,则 true row,column 单元格的行与列 当表格想要绘制一个单元格时,该方法便被调用。

    6910

    最强大的 CSS 布局 —— Grid 布局

    行和列 网格单元:一个网格单元是在一个网格元素中最小的单位, 从概念上来讲其实它和表格的一个单元格很像。...如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高 .wrapper { display: grid; grid-template-columns: 200px 100px...,分别定位在哪根网格线,从而指定项目的位置 grid-column-start 属性:左边框所在的垂直网格线 grid-column-end 属性:右边框所在的垂直网格线 grid-row-start...属性:上边框所在的水平网格线 grid-row-end 属性:下边框所在的水平网格线 .wrapper { display: grid; grid-template-columns: repeat...(左中右),跟 justify-items 属性的用法完全一致,但只作用于单个项目 align-self 属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目

    6K20

    【CSS】最强大的布局之grid布局精讲

    它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。 Grid 布局则是将容器划分成 “行” 和 “列” 产生单元格,然后指定 “项目所在” 的单元格,可以看作是二维布局。...单元格         每行每列都会分布单元格,在单元格内我们可以添加想要的内容。         网格线 ​         格子的边框为网格线,分为上下网格线和左右网格线。...end - 对齐容器的结束边框。 center - 容器内部居中。 stretch - 项目大小没有指定时,拉伸占据整个网格容器 space-around - 每个项目两侧的间隔相等。...grid-column-start 属性:左边框所在的垂直开始网格线 grid-column-end 属性:右边框所在的垂直终点网格线 grid-row-start 属性:上边框所在的水平开始网格线 grid-row-end... 属性:下边框所在的水平终点网格线 .container { height: 100vh; display: grid;

    2.9K21
    领券