After creating a prototype of a landscape design, the next step is to code it using HTML5 & CSS.
To create a responsive layout, I have chosen to utilize grids. Below is the structure that I sketched on paper before diving into coding. However, I am uncertain if the parameters set for the grid template are accurate for achieving responsiveness.
Prototype
https://i.sstatic.net/4wD5D.jpg
Sketch
https://i.sstatic.net/hZYz7.jpg
HTML
<div class="landscape-grid">
<div class="landscape-grid__left-bar"></div>
<div class="landscape-grid__header"></div>
<div class="landscape-grid__main-content"></div>
<div class="landscape-grid__video"></div>
</div>
CSS
.landscape-grid{
display: grid;
grid-template-columns: 3.28125% 53.489583333333% 43.2291666666667%;
grid-template-rows: 75px 168px 711px auto;
}
I attempted to maintain proportional columns by converting pixels into proportions. However, many designers opt for using fr units and min-content/max-content attributes in their grids. How can I incorporate these techniques effectively in my design?
Your suggestions and insights would be greatly valued!