时间戳

首页 > 解决方案 > 我无法让 CSS-Grid-Template-Areas 工作。有任何想法吗？

javascript - 我无法让 CSS-Grid-Template-Areas 工作。有任何想法吗？

问题描述

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

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>

标签： javascripthtmlcss

解决方案

这是我对我的 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;
}

推荐阅读