如何仅使用网格来创建自适应网格布局？

Question

我正尝试仅使用grid：创建网格布局。

grid: "header header header" 50px "sidebar main main" 200px / 100px auto;

这是我正在使用的代码：https://codepen.io/benji01462/pen/BayZLRX或https://jsfiddle.net/lambsbaaacode/6qknw93f/1/（两者相同）

HTML

<footer class="end">
    <section class="brainstorm">
        <h5>project brainstorm</h5>
        <ul class="end-list">
            <li>
                <a href="index.html">Home</a>
            </li>
       </ul>
      <section class="support">
      ... continues on with each having a <ul>

CSS

.end {
display: grid;
grid-area: end;
grid: "brainstorm" auto "support" auto "company" auto "social" auto;
section {
    margin: 0 1.5rem;
}

Answer 1

我想您想要这样的东西，如果需要，请进行如下编辑：

.end {
    display: grid;
    grid-area: end;
    background: var(--azureish-white);
    grid:
        "brainstorm" auto
        "support" auto
        "company" auto
        "social" auto;

    /* add these two line*/

    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: "brainstorm support company social";
}

.end {
    display: grid;
    grid-area: end;

    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: "brainstorm support company social";
}

<footer class="end">
<section class="brainstorm">
<h5>project brainstorm</h5>
<ul class="end-list">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="lr.html">Lastest Release</a>
</li>
<li>
<a href="gs.html">Getting Started</a>
</li>
<li>
<a href="ex.html">Extensions</a>
</li>
<li>
<a href="up.html">Updates</a>
</li>
<li>
<a href="p.html">Pricing</a>
</li>
<li>
<a href="beta.html">Beta</a>
</li>
<li>
<a href="dev.html">Developer</a>
</li>
</ul>
</section>
<section class="support">
<h5>support</h5>
<ul>
<li>
<a href="ts.html">Troubleshooting</a>
</li>
<li>
<a href="ques.html">Questions</a>
</li>
<li>
<a href="rab.html">Report A Bug</a>
</li>
<li>
<a href="hg.html">Get Help</a>
</li>
</ul>
</section>
<section class="company">
<h5>company</h5>
<ul>
<li>
<a href="au.html">About Us</a>
</li>
<li>
<a href="j.html">Jobs</a>
</li>
<li>
<a href="ps.html">Press</a>
</li>
<li>
<a href="con.html">Contact</a>
</li>
<li>
<a href="tos.html">Terms of Service</a>
</li>
<li>
<a href="car.html">Careers</a>
</li>
<li>
<a href="priv.html">Privacy</a>
</li>
<li>
<a href="sp.html">Shop</a>
</li>
</ul>
</section>
<section class="social">
<h5>Social</h5>
<ul>
<li>
<a href="https://www.instagram.com">instagram</a>
</li>
<li>
<a href="https://www.twitter.com">twitter</a>
</li>
<li>
<a href="https://www.facebook.com">facebook</a>
</li>
<li>
<a href="https://www.youtube.com">youtube</a>
</li>
</ul>
</section>
</footer>