css之display：grid布局改块级元素布局

1.问题：

div是块级元素，一个div元素占一行，但是，今天测试样式时，总是会有两个div并占一行，很困惑，结果发现是app这个样式

在main.css里

#app样式布局在main.ts里被应用

2.原因以及样式分析 @import './base.css'; #app { max-width: 1280px; margin: 0 auto; padding: 2rem; font-weight: normal; } a, .green { text-decoration: none; color: hsla(160, 100%, 37%, 1); transition: 0.4s; padding: 3px; } @media (hover: hover) { a:hover { background-color: hsla(160, 100%, 37%, 0.2); } } @media (min-width: 1024px) { body { display: flex; place-items: center; } #app { display: grid; grid-template-columns: 1fr 1fr; padding: 0 2rem; } } 整体功能

这段代码是一个CSS样式表，用于设置一个名为#app的元素的样式，使其在屏幕宽度大于等于1024px时，以两列网格布局显示，并且在不同屏幕宽度下有不同的布局调整，以实现响应式设计。

代码结构 媒体查询：@media (min-width: 1024px)表示当屏幕宽度大于等于1024px时，应用以下样式。#app元素的样式：在媒体查询内部，#app元素被设置为display: grid，表示使用CSS网格布局，grid-template-columns: 1fr 1fr表示将#app元素划分为两列，每列的宽度为1份弹性空间，padding: 0 2rem表示在水平方向上设置2rem的内边距。#app元素的其他样式：在媒体查询外部，#app元素还被设置了max-width: 1280px，表示其最大宽度为1280px，margin: 0 auto表示在水平方向上居中显示，padding: 2rem表示在四周设置2rem的内边距，font-weight: normal表示字体粗细为正常。全局样式：*表示所有元素，*::before和*::after表示所有元素的伪元素，这些元素被设置为box-sizing: border-box，表示使用盒模型，margin: 0表示外边距为0，font-weight: normal表示字体粗细为正常。 响应式设计 大屏幕布局：当屏幕宽度大于等于1024px时，#app元素以两列网格布局显示，每列宽度自适应，水平方向有2rem的内边距，最大宽度为1280px，水平居中。小屏幕布局：当屏幕宽度小于1024px时，由于没有在媒体查询外部设置#app元素的其他布局样式，可能会采用默认的布局方式，比如堆叠显示等。 3.grid布局改快级元素布局 display: block; /* 将grid布局改为块级元素布局，不再是两列显示 */