问我不能让CSS-Grid-Template-Areas工作。有什么想法吗？
EN

Stack Overflow用户

提问于 2020-08-01 05:17:26

回答 1查看 30关注 0票数 0

我使用随机文本作为虚拟文本。请告诉我哪里出错了。我尝试为网格区域模板使用不同的类别，当我尝试逐个输入它们时，它可以工作，但当我单独输入时，它不工作。而且，它似乎只在单列布局中这样做，而不是在多列布局中。

body{
    background-color: beige;
}

main{
    background-color: white;

  overflow: clip;
    word-wrap: break-all;
 width: 100%;

}



.grid1{
  display: grid;
grid-template-columns: 400px 400px;

max-width: 800px;
    -moz-grid-template-areas: 

         "Content1 Content1"
        "Header Footer"
        "Footer Footer"
        ;
    word-wrap: break-word;
    overflow: hidden;
  }


.Content1{
    grid-area: Content1;
}

.Header{
    grid-area: Header;
}

.Footer{
    grid-area: Footer;
}

<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" href="../CSS/stylesheet.css">

</head>
 <body>
<main class="grid1">
    <section class="Header">

<P>
MailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMail 

    </P>
        </section>

        <section class="Content1">
<P>
Blargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh bla 
    </P>
        </section>

        <section class="Footer">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
                </section>
</main>
    </body>
</html>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2020-08-01 05:31:53

这是我提出的CSS网格问题的答案，请复习一下？我想我已经弄明白了，我只是想让有更多经验的人来检查它，以确保它是以正确的方式完成的。

<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" href="../CSS/stylesheet.css">
                                                  
</head>
 <body>
<main class="grid1">
    <section class="Header">
       
<P>
MailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMail 
 
    </P>
        </section>
    
        <section class="Content1">
<P>
Blargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh bla 
    </P>
        </section>
    
        <section class="Footer">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
                </section>
    

        <section class="Post1">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
            </P></section>
    
    
        <section class="Post2">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
    </section>
    
    
        <section class="Post3">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
    </section>
</main>
    </body>
</html>

body{
    background-color: beige;
}

main{
    background-color: white;
    
  overflow: clip;
    word-wrap: break-all;
 width: 100%;
 
}

 
 
.grid1{
  display: grid;
grid-auto-columns: minmax(6, 3fr);
    grid-auto-columns: minmax(100px, auto);
 
max-width: 800px;
    grid-template-areas: 
    "Header Content1 Footer" 
    "Post1 Post2 Post3"
        
 
        ;
    word-wrap: break-word;
    overflow: hidden;
  }
  
 
.Content1{
    grid-area: Content1;
}

.Header{
    grid-area: Header;
}

.Footer{
    grid-area: Footer;
}

.Post1{
    grid-area: Post1;
}

.Post2{
    grid-area: Post2;
}

.Post3{
    grid-area: Post3;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63199193

复制

相似问题

问我不能让CSS-Grid-Template-Areas工作。有什么想法吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我不能让CSS-Grid-Template-Areas工作。有什么想法吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我不能让CSS-Grid-Template-Areas工作。有什么想法吗？
EN