Centrado en CSS Grid
Estoy tratando de crear una página simple con CSS Grid.
Lo que no puedo hacer es centrar el texto del HTML en las celdas de la cuadrícula respectiva.
He intentado colocar contenido por separadodiv
s tanto dentro como fuera de laleft_bg
yright_bg
selectores y jugando con algunas de las propiedades CSS en vano.
¿Cómo hago esto?
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}
.left_bg {
display: subgrid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
}
.right_bg {
display: subgrid;
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
}
.left_text {
grid-column: 1 / 1;
grid-row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center;
font-family: Raleway;
font-size: large;
}
.right_text {
grid-column: 2 / 2;
grid_row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center;
font-family: Raleway;
font-size: large;
}
<div class="container">
<!--everything on the page-->
<div class="left_bg">
<!--left background color of the page-->
</div>
</div>
<div class="right_bg">
<!--right background color of the page-->
</div>
<div class="left_text">
<!--left side text content-->
<p>Review my stuff</p>
<div class="right_text">
<!--right side text content-->
<p>Hire me!</p>
</div>
</div>