web前端的一个问题,为什么我写的这个代码不能像图片里那样并排

<head>
    <meta charset="UTF-8">
    <title>图片</title>
    <style type="text/css">
        #grid {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    
    <hr>
    <div id="grid">
        <div class="grid-item">
            <a href="#">
                <img src="微信.jpg" width="200" />
            </a>
        </div>
       <div class="grid-item">
           <a href="#">
               <img src="QQ.jpg" width="200" />
           </a>
       </div> 
       <div class="grid-item">
           <a href="#">
               <img src="微博.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="爱奇艺.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="优酷.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="微信.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="QQ.jpg" width="200" />
           </a>
       </div>
       
       <div class="grid-item">
            <a href="#">
                <img src="爱奇艺.jpg" width="200" />
            </a>
        </div>
       <div class="grid-item">
           <a href="#">
               <img src="微博.jpg" width="200" />
           </a>
       </div> 
       <div class="grid-item">
           <a href="#">
               <img src="优酷.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="微信.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="微博.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="QQ.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="爱奇艺.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
            <a href="#">
                <img src="优酷.jpg" width="200" />
            </a>
        </div>
       <div class="grid-item">
           <a href="#">
               <img src="微信.jpg" width="200" />
           </a>
       </div> 
       <div class="grid-item">
           <a href="#">
               <img src="QQ.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="微博.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="爱奇艺.jpg" width="200" />
           </a>
       </div>
       <div class="grid-item">
           <a href="#">
               <img src="优酷.jpg" width="200" />
           </a>
       </div>
    </div>
    <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        window.onload = function() {
            var msnry = new Masonry('#grid', {
                itemSelector: '.grid-item',
                columnWidth: 200
            });
        }
    </script>
</body>

img

img

把style改成下面这样就可以了

<style type="text/css">
        #grid {
            width: 1000px;
            margin: 0 auto;
            display:flex;
            flex-wrap:wrap;
        }
    .grid-item:{
        width:200px;
    }
    </style>

因为缺少css