css 如何使网格布局节每节跨越4列？

toe95027 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(216)

我正在尝试网格布局，但似乎不能得到左，中，右跨越4列每一个，沿着同一行在12列网格。

-------------------------------------------------------------------------
- Header                                                                -
-------------------------------------------------------------------------
-------------------------------------------------------------------------
- Nav                                                                   -
-------------------------------------------------------------------------

-------------------------------------------------------------------------
- Banner
- Banner                                                                -
-------------------------------------------------------------------------
-----------------------  ----------------------- ------------------------
-                      - -                     - -                      -
-   left               - -  middle             - -    right             -
-                      - -                     - -                      -
-                      - -                     - -                      -
------------------------ ----------------------- ------------------------

-------------------------------------------------------------------------
-            footer                  -           footer                 -
-                                    -                                  -
-------------------------------------------------------------------------

x一个一个一个一个x一个一个二个x

css

来源：https://stackoverflow.com/questions/75248915/how-can-i-make-my-grid-layout-sections-to-span-4-columns-each

2条答案

按热度按时间

q1qsirdb1#

如果你在一个元素上设置了display:grid，这只会影响到它的直接子元素，在你的例子中，网格会在元素main上生效，因为它是container的直接子元素。
如果您希望网格影响左、中、右以及页脚列，则必须将它们从各自的父列中拉出，或者可以将main和footer设置为与其父列具有相同的网格。

display: grid;
grid-template-columns: inherit;

我不知道除了这个问题之外，你是否会以其他方式使用容器上的网格，但是你可以考虑不使用容器上的网格，而只是把它放在需要列的元素上。
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-27

lrl1mhuk2#

在div或section上进行左-中-右换行，并尝试使用以下css

display : grid;
grid-template-areas: "a a a";
width: 100%;

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何使网格布局节每节跨越4列？

2条答案

相关问题

热门标签

最新问答