Сетка + Flex
html, body {
margin: 0;
height: 100%
}
.grid-container * {
border: 1px solid #ccc;
}
.grid-container div {
display: flex;
justify-content: center;
align-items: center
}
.grid-container div:after {
content: attr(class);
color: #888;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: arial;
}
.grid-container {
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: '. .' '. .';
}
<div class='grid-container'>
<div>Text Slider</div>
<div>Grid-cuisine</div>
<div>Grid Produits</div>
<div>Text-produits</div>
</div>