问题原因：
当grid布局中配置1fr。如果子元素是多个，会按照分配比例限制子元素宽度，
如果子元素只有一个，或者少于配置的列数
剩余的子元素，会根据元素内容的大小，自动撑开，填补宽度，如果没有超出，则正常显示
.body-box {
width: 100vw;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
修改成百分比，固定宽度就可以了
grid-template-columns: 50% 50%;
假设html结构 1、flex布局 2、grid布局 3、表格法 子元素并不会被转换成内联元素 4、定位系列4.1...
第一个 Grid 布局 CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素...
一个简单的Grid布局 CSS Grid 布局由两个核心组成部分：父元素（wrapper）和子元素（item）。w...
父容器 display: grid; display: inline-grid;设为网格布局以后，容器子元素（项...
定义display:grid或inline-grid开启子元素的Grid布局。 不同于flex布局，grid布局是...
一、如何实现子元素左右等高布局 grid布局 最简单 flex布局flex中的伸缩项目默认都拉伸为父元素的高度，也...
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是...
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是...
1 .display:grid 设为网格布局以后，容器子元素（项目）的float、display: inline-...
基本结构 CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrap...
本文标题：grid布局，子元素大小会被撑开问题
本文链接：https://www.haomeiwen.com/subject/brsxsjtx.html
网友评论