100% height of inner element grid-layout - css

Question

I have an element which I want to use the 100% of the height available on a grid-layout design.
What I have is this:
.wrapper {
background: #F7F7F7 !important;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
grid-template-areas: "a b c" "d e f";
}
.one {
grid-area: a;
}
.two {
grid-area: b;
}
.three {
grid-area: c;
}
.four {
grid-area: d;
}
.five {
grid-area: e;
}
.six {
grid-area: f;
}
<div class="wrapper">
<div class="one">
<image height="100%">
</div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
How can I do to have the image with a height that uses the 100% of the one height available?
Thanks!

Answer 1

You can give a class to it and make it's width and height 100%
.wrapper {
background:#000 !important;
width:100%;
height:100vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px;
padding:20px;
grid-template-areas:
"a b c"
"d e f";
}
.scene{
width:100%;
height:100%;
}
.white{
background:#fff;
}
.one{
grid-area:a;
}
.two{
grid-area:b;
}
.three{
grid-area:c;
}
.four{
grid-area:d;
}
.five{
grid-area:e;
}
.six{
grid-area:f;
}
<div class="wrapper">
<div class="one white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="two white"></div>
<div class="three white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="four white"></div>
<div class="five white"><img src='https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg' class='scene'/></div>
<div class="six white" ></div>
</div>