1. 首页
  2. 问题列表
  3. HTML网格布局不符合CSS
提问者：小点点

HTML网格布局不符合CSS


所以我尝试用纯HTML和CSS建立一个网格格式的网站页面，正如您将在下面我的代码中看到的那样。

我正在尝试在header&； 内部占位符标记。

您将看到HTML布局对齐方式，grid-template-area布局清晰，以及grid-template-rows指定的行数

那么，为什么我只得到一个红色的框在屏幕的角落，当它是相当明显的我想要的东西，根据插图-除了一个弯曲的框，然后是一个直线的框，然后是一个弯曲的框等走下左手边？

我尝试更改fr数字以适应左侧的行数。

谢谢。

插图

null

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "Title Title"
        "Header Content"
        "inner-placeholder Content"
        "Header Content"
        "inner-placeholder Content"
        "Sidebar Content"
        "Footer Footer";
    grid-gap: 10px;
}

.Title{
    grid-area: Title;
}

.Header{
    grid-area: Header;
}

.Sidebar{
    grid-area: Sidebar;
}

.Content{
    grid-area: Content;
    
}

.Footer{
    grid-area: Footer;
}

.inner-placeholder{
    grid-area: inner-placeholder;
}

.grid div:nth-child(even){
    background-color: red;
}

.grid div:nth-child(odd){
    background-color: green;
}
<div class="grid">
            <div class="Title">Title
            </div>
            <div class="Header">Header
            </div>
            <div class="inner-placeholder">
            </div>
            <div class="Header">Header
            </div>
            <div class="inner-placeholder">
            </div>
            <div class="Sidebar">Sidebar
            </div>
            <div class="Content">Content
            </div>
            <div class="Footer">Footer
            </div>
        </div>

null


共1个答案

匿名用户

看来你误解了网格区域的工作原理。 如果任何网格区域跨越超过1行或1列，则需要形成正方形或矩形。 这意味着它们还需要处于一个连续的序列中，如2x2或1x3等等，在您的示例中，您将标题区域和占位符区域彼此分开，这就破坏了网格。

null

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas: 
    "Title                Title" 
    "Header               Content" 
    "inner-placeholder    Content" 
    "Header2              Content" 
    "inner-placeholder2   Content" 
    "Sidebar              Content" 
    "Footer               Footer";
  grid-gap: 10px;
}

.Title {
  grid-area: Title;
}

.Header {
  grid-area: Header;
}

.Header2 {
  grid-area: Header2;
}

.Sidebar {
  grid-area: Sidebar;
}

.Content {
  grid-area: Content;
}

.Footer {
  grid-area: Footer;
}

.inner-placeholder {
  grid-area: inner-placeholder;
}

.inner-placeholder2 {
  grid-area: inner-placeholder2;
}

.grid div:nth-child(even) {
  background-color: red;
}

.grid div:nth-child(odd) {
  background-color: green;
}
<div class="grid">
  <div class="Title">Title</div>
  <div class="Header">Header</div>
  <div class="inner-placeholder"></div>
  <div class="Header2">Header2</div>
  <div class="inner-placeholder2"></div>
  <div class="Sidebar">Sidebar</div>
  <div class="Content">Content</div>
  <div class="Footer">Footer</div>
</div>

相关问题