I'm trying to create a simple css grid using the native CSS Grid properties.
I really don't understand why this doesn't go in the middle (main axis) on the display. What is wrong with it? Does anyone have any ideas? Thanks
<body>
<div class="container">
<div class="pic">pic</div>
<div class="headline">headline</div>
<div class="text">text</div>
</div>
</body>
* {
margin: 2px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: antiquewhite;
}
.container {
height: 100vh auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr 1fr;
justify-content: center;
place-items: center;
gap: 3px;
}
.pic {
border: 2px sandybrown solid;
background-color: #fff;
}
.headline {
border: 2px sandybrown solid;
background-color: #fff;
}
.text {
border: 2px sandybrown solid;
background-color: #fff;
}
type here
