Как скопировать HTML-сетку в флаттер

Question

Я хочу показать сетку во флаттере, как показано на моем веб-сайте, я обернул сетку внутри listView, чтобы она прокручивалась правильно и правильно, но я не могу понять, как реализовать нормальную сеткус разделителями столбцов и строк.

мой код флаттера:

child: ListView(
  controller: controller,
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Card(
        child: Container(
          width: MediaQuery.of(context).size.height*1.5,
          child: GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 50.0 / 9.0,
            children: new List<Widget>.generate(16, (index) {
              return new GridTile(
                child: new Container(
                    color: Colors.blue.shade200,
                    child: new Center(
                      child: new Text('tile $index'),
                    )
                ),
              );
            }),
          ),
        )
    )
  ],
),

html grid:

<div class="roundedTable slider">
    <div class="grid-container slide">
        <div class="grid-item"></div>
        <div class="grid-item"><h3>#GOOD</h3></div>
        <div class="grid-item"><h3>#BETTER</h3></div>
        <div class="grid-item"><h3>#BEST</h3></div>
       <div class="grid-item"><h5>Prezzo</h5></div>
       <div class="grid-item">€ 290</div>
       <div class="grid-item">€ 370</div>
       <div class="grid-item">€ 500</div>
       <div class="grid-item"><h5>Durata</h5></div>
       <div class="grid-item">120"</div>
       <div class="grid-item">180"</div>
       <div class="grid-item">210"</div>
       <div class="grid-item"><h5>Consegna</h5></div>
       <div class="grid-item">15 Giorni</div>
       <div class="grid-item">10 Giorni</div>
       <div class="grid-item">7 Giorni</div>
       <div class="grid-item"><h5>Nomi e Data</h5></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><h5>Scelta audio style (da campione)</h5></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><h5>Superwide Format</h5></div>
       <div class="grid-item"><i class="fas fa-times"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><h5>Color Correction</h5></div>
       <div class="grid-item"><i class="fas fa-times"></i></div>
       <div class="grid-item"><i class="fas fa-times"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><h5>Stabilizzazione Cinema</h5></div>
       <div class="grid-item"><i class="fas fa-times"></i></div>
       <div class="grid-item"><i class="fas fa-times"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"><h5>Transizioni Clips</h5></div>
       <div class="grid-item"><i class="fas fa-times"></i></div>
       <div class="grid-item"><i class="fas fa-times"></i></div>
       <div class="grid-item"><i class="fas fa-check"></i></div>
       <div class="grid-item"></div>
       <div class="grid-item"><a class="custom-button" href="#">add to cart</a></div>
       <div class="grid-item"><a class="custom-button" href="#">add to cart</a></div>
       <div class="grid-item"><a class="custom-button" href="#">add to cart</a></div>
     </div>
</div>

Я создал кодовую ручку здесь

Я не ищу причудливую сетку, я просто хочу нормальную с закругленными углами, вы можете мне помочь?