我正在尝试使用CSS Grid创建一个简单的页面.
我没有做的是将文本从HTML中心放到相应的网格单元格中.
我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg
我该怎么做呢？
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}
.left_bg {
display: subgrid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
}
.right_bg {
display: subgrid;
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
}
.left_text {
grid-column: 1 / 1;
grid-row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center; …关于CSS Grid的浏览器支持情况如何？
我环顾四周，很难理解有关兼容性的整个情况。
如果我转到可以使用，似乎几乎所有浏览器都支持它。但是，如果我转到Microsoft文档，情况会有所变化。
似乎几乎所有浏览器都支持Grid，但除Firefox外，它们都不支持所有功能。
然后，关于Edge，我得到的是它仅支持不再使用的旧规范，而当前正在进行更新。
突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是
但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。
我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。
以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。
Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？
编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）