我无法将CSS网格对齐

Question

我的标题可以正常工作，但是我的图片无法跟随我的专栏。基本上在下面的代码中，我希望.left和.mid水平排列（并且还将有第3张图片）现在它们垂直排列。我认为列设置可能有误，但我不确定

@import url('https://fonts.googleapis.com/css?family=Sofia');
    body {
    margin: 0;
    }

    nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    grid-gap: 1em;
    align-items: center;
    text-align: center;
    /*border-bottom: 4px solid black;*/
    background:#0066cc;
    }

    @media screen and (max-width: 900px) {
    nav {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 1em;
    }
    }

    .1 {
      grid-column: 1;
    }

    .2 {
     grid-column: 2;
     }

    .logo {

    grid-column: 3;
    background-image: url("images/cocinaheader.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 6vh;

     }

    .3 {
    grid-column: 4;
    }

    .4 {
     grid-column: 5;
     }

    .navLinks {
    font-family: 'Sofia';
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    }

    .navLinks:hover {
     color: white;
     border-left: 1px solid white;
     border-right: 1px solid white;
     padding: 1em 1em;
    }

    #twist {
    color: blue;
    }
    banner {
    padding: 1em 1em;
    display: grid;
     grid-template-rows: 100%;

     }
    .bannerlogo{
    grid-row: 1;
    /*background-image: url(images/banner.jpg);*/
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    
    }
    .h1{
    font-family: 'Sofia';
    font-size: 1em;
    text-transform: uppercase;
    color: black;
    
    }
    block {
    display: grid;
    grid-template-columns:20% 20% 20% 20% 20%;
    /*grid-auto-rows: auto;*/
    grid-gap: 1em;
    align-items: center;
    }
    .left {
    grid-column: 2;
    background-image: url("images/foodleft.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 20vh;
    }
    .mid {
        grid-column: 3;
    background-image: url("images/foodmid.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 20vh;
    }

    <header>
      <nav class="container">
        <div class="1">
        <a href="#" class="navLinks">Home</a>
        </div>
         <div class="2">
         <a href="#" class="navLinks">Menu</a>
         </div>
         <div class="logo">
        </div>
        <div class="3">
        <a href="#" class="navLinks">About Us</a>
         </div>
            <div class="4">
        <a href="#" class="navLinks">Contact Me</a>
         </div>
      </nav>
     </header>
        <br><br><br><br>
     <main>
      <div class="banner">
        <div class="bannerlogo">
            <center>
            <img src="images/banner.jpg">
            </center>
         </div>
          <br><br><br><br><br><br>
          <div class="h1">
          <center><h1>A taste of our menu</h1></center>
          </div>
          <!-- Start block grid -->
          <div class="block">
          <div class="left"></div>   
          <div class="mid"></div>
          </div>

Answer 1

在CSS中，不能仅使用数字作为类名。尝试使用.item1 .item2等...