Usei este código abaixo que retirei do app restaurante para usar na minha consulta em formato livre, ficou bacana os cards, mando ele mostrar e duas colunas e fica show.
Ja inspecionei essa conulta para ver o CSS que me permita deixar as duas colunas alinhadas no centro da tabela e não consigo de forma alguma, sempre fica para o lado esquerdo.
.card {
border: 1px solid #D1DDE2;
background: white;
width: 300px;
border-radius: 3px;
overflow: hidden;
float: left;
margin-right: 30px;
margin-bottom: 30px;
min-height: 350px;
font-family: "Open Sans";
font-size: 13px;
-webkit-box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
-o-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
}
.card a {
color: #3793D4;
text-decoration: none;
}
.card a:hover {
text-decoration: underline;
}
.card img {
width: 300px;
height: 300px;
}
.card .card-block .card-title {
font-size: 20px;
margin: 0 0 5px;
min-height: 35px;
font-weight: 300;
color: #31353d;
}
.info {
width: 70%;
float: left;
padding: 15px;
color: #aaa;
font-size: 0.85em;
height: 130px;
}
.price {
width: 30%;
float: left;
color: #9bb6aa;
font-size: 2.7em;
position: relative;
margin-top: 45px;
}
.price::before {
content: '$';
position: absolute;
top: 0;
left: -10px;
font-size: 0.35em;
}
.card-block:after {
content: '';
display: table;
clear: both;
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.cs_grid_body td
{
text-align: center;
vertical-align: middle;
}
{imagem}
<div class="card-block">
<div class="info">
<h4 class="card-title">
{nome}
</h4>
{descricao}
</div>
<div class="price">
{valor}
</div>
</div>
