Trung tâm cá nhân
sách gpt4 ai đã đi

html - CSS:新 CSS 网格的全宽背景

In lại 作者：太空宇宙 更新时间：2023-11-04 01:40:07 28 4
mua khóa gpt4 Nike

我正在像这样使用新的 css 网格:

#site {
   Hiển thị: lưới;
   grid-template-columns: 10% 1fr 1fr 1fr 10%;
   grid-template-rows: 100px auto;
   grid-template-areas:
      ". header header header ."
      ". content content sidebar ."
}

所以我有两行和 5 列，但只有 3 列有内容。我在模板区域中使用点来定义空白区域。这导致 3 列布局在左侧和右侧都有空白。如果我将一个元素放置在具有背景颜色的网格区域中，则左右空白区域保持白色(逻辑上)。我想要的是全宽背景(颜色)，但我不太确定如何实现这一点。我想到的一个选择是在背景中有第二个网格，它具有相同的列和行但没有空白，然后我可以用颜色填充它，但我认为这不是最佳做法。

1 Câu trả lời

我发现最好的方法是将网格放在容器内一定宽度以使内容居中。并让您需要扩展背景的元素提供巨大的左/右填充，以及相同的负边距。

一定要给 body 一个 overflow-x: hidden;


还有 CSS:

.container{
  width:1000px;
  margin: 0 auto; //
}    
#site {
  Hiển thị: lưới;
  grid-template-columns: 10% 1fr 1fr 1fr 10%;
  grid-template-rows: 100px auto;
  grid-template-areas:
     ". header header header ."
     ". content content sidebar ."
}

.header{
   background: red;
   padding: 0 3000px;
   margin: 0 -3000px;
}

thân hình{
   overflow-x: hidden;
}

关于html - CSS:新 CSS 网格的全宽背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45531770/

28 4 0
Bài viết được đề xuất: c - 输入值创建二叉搜索树
Bài viết được đề xuất: Yêu cầu Node.js - In toàn bộ yêu cầu http của bài đăng (thô)
Bài viết được đề xuất: python - 从 bbedit 中运行 python 的编码错误
Bài viết được đề xuất: objective-c - 返回 C 结构数组
太空宇宙
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com