reference/grid_bounds_01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

        .container {
          display:grid;
          grid-template-columns: 25% 25% 25% 25% ;
          grid-template-rows: 25% 25% 25%;
          gap: 5px;          
          overflow:hidden;
        }
           
        .image {
           border:5px black solid;
           grid-row: 1 / 3;
           grid-column: 1 / 3;
           filter:grayscale(100%);
           overflow:hidden;
         } 
         
         .image img {
           width: 100%;
         }
        div{
            background: CadetBlue;
            text-align: center;
            padding: 5px;
        }  
        div:nth-of-type(odd) {
            background: BurlyWood;
        }

    </style>
</head>
<body>

<div class="container">
  <div class="image4 image">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Google-favicon-2015.png/150px-Google-favicon-2015.png" alt="journey map" />
  </div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
<!--   <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
 -->
</div>

</body>
</html>