html5 – Retornar objetos de un for con estilos aplicado en Javascript


estoy iniciando en javascript y tengo un array de objetos, y quisiera retornarlos uno por uno para que aparecieran estilizados.

El problema es que solo me retorna el ultimo objeto del array con los estilos aplicados; y no cada uno de los objetos existentes.

Hoja de estilos a aplicar: .wapper lo utilizo para así poder obtener dos columnas automáticas.

* {
  box-sizing: border-box;
  margin: 0;
}

main {
  float:left;
  width:80%;
  padding:0 20px;
  background: #E8E5DA;
  padding-bottom: 60px;
  padding-top:30px;
  font: sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 22px;
}

h2 {
  padding-top: 30px;
  padding-left: 30px;
  color: #D62828;
  font: 120% sans-serif;
}

En mi .html es donde tengo mi script a ejecutar
El error se encuentra básicamente en la manera en la cual retorno mis valores.

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript">

        function Platillo(nombre,precio,tipo) {
          this.nombre = nombre;
          this.precio = precio;
          this.tipo = tipo;
        }

        var platillos = ();
        var p1 = new Platillo("Hongos Portobello",115,"Aperitivo");
        var p2 = new Platillo("Pasta Gamberi",130,"Aperitivo");
        var p3 = new Platillo("Trío de Bruschetas Serrano",115,"Aperitivo");
        var p4 = new Platillo("Milanesa de Pollo",85,"Carne");
        var p5 = new Platillo("Filete de Pescado",115,"Pescado");
        var p6 = new Platillo("Pollo al limón",210,"Carne");
        var p7 = new Platillo("Chicarron de rib eye",295,"Carne");
        var p8= new Platillo("Pastel de Chocolate",60,"Postre");
        var p9 = new Platillo("Flan Napolitano",665,"Postre");
        var p10 = new Platillo("Fondant Choco",115,"Postre");
        platillos.push(p1,p2,p3,p4,p5,p6,p7,p8,p9,p10);


        function mostrarListado(){
          var lista='';
          for(var i=0; i<platillos.length; i++){
            document.getElementById('nombreProducto').innerText = platillos(i).nombre;
            document.getElementById('precioProducto').innerText =  'Precio de venta: ' + '$' + platillos(i).precio + 'MXN';
            document.getElementById('tipoComida').innerText =  'Tipo de comida: ' + platillos(i).tipo;
          }

        }

    </script>
  </head>
  <body onload="mostrarListado()">
        <main>
          <section>
            <h1>Menú</h1>
            <div class="wrapper">
              <div>
                <h2 id = "nombreProducto"></h2>
                <ul>
                  <li id = "precioProducto"></li>
                  <li id = "tipoComida"></li>
                </ul>
              </div>
            </div>

          </section>
        </main>

Sé que una manera de retornar todo correctamente seria recorrer el arreglo con un for y guardar en una cadena todo formateado y así retornarlo en un div; pero necesito aplicar los estilos y de esa manera no me sería posible.

Obtengo esto:
Error obtenido:

Y necesito obtener esto:
Forma correcta