I quickly coded this, I think it will help you. All you have to do is take each div one by one and add CSS for a better visual.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-auto-rows: min-content;
}
.one {
grid-column: 1;
grid-row: 1;
border: 1px solid red;
}
.two {
grid-column: 2 / 5;
grid-row: 1;
border: 1px solid red;
}
.three {
grid-column: 1;
grid-row: 2 / 7;
border: 1px solid red;
}
.four {
grid-column: 2 / 5;
grid-row: 2;
border: 1px solid red;
}
.five {
grid-column: 2 / 5;
grid-row: 3;
border: 1px solid red;
}
.six {
grid-column: 2 / 5;
grid-row: 4;
border: 1px solid red;
}
.seven {
grid-column: 2 / 4;
grid-row: 5;
border: 1px solid red;
}
.height {
grid-column: 4 / 5;
grid-row: 5;
border: 1px solid red;
}
<div class="container">
<div class="one">
<button>back</button>
</div>
<div class="two">
<h4>I WATCHED </h4>
</div>
<div class="three">
<p>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.vox-cdn.com%2Fthumbor%2FzEZJzZFEXm23z-Iw9ESls2jYFYA%3D%2F89x0%3A1511x800%2F1600x900%2Fcdn.vox-cdn.com%2Fuploads%2Fchorus_image%2Fimage%2F55717463%2Fgoogle_ai_photography_street_view_2.0.jpg&f=1&nofb=1"
width="156" height="100"></img>
</p>
</div>
<div class="four">
<p>
<h2>HARRY POITTER AND THE DEADLY HALLOWS</h2>
</p>
<h4>2020</h4>
</div>
<div class="five">
<p>
<input type="checkbox" id="theday" name="theday" value="theday">
<label for="theday"> Which day did you watch</label><br>
</p>
</div>
<div class="six">
<textarea id="review" name="review" rows="4" cols="50" placeholder="add a rewiev">
</textarea>
</div>
<div class="seven">
<p>Tags Press Tab to complete, Enter to create</p>
<input placeholder="eg. netflix"></input>
</div>
<div class="height">
<p>Rating</p>
<p>5 stars </p>
</div>
</div>
I am trying to create a layout like
in html and css, and below you will find the code that i ended up with.
In the code i was using bootstrap and their grid system and i was wondering if its possible to recreate the layout using flexbox and css grid? Thankful for help and tips
Below is the code i came up with.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<button>back</button>
</div>
<div class="col-xs-4">
<h4>I WATCHED </h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-4">
<p><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.vox-cdn.com%2Fthumbor%2FzEZJzZFEXm23z-Iw9ESls2jYFYA%3D%2F89x0%3A1511x800%2F1600x900%2Fcdn.vox-cdn.com%2Fuploads%2Fchorus_image%2Fimage%2F55717463%2Fgoogle_ai_photography_street_view_2.0.jpg&f=1&nofb=1"
width="156" height="100"></img>
</p>
</div>
<div class="col-lg-8">
<p>
<h2>HARRY POITTER AND THE DEADLY HALLOWS</h2>
</p>
<h4>2020</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-4">
</div>
<div class="col-lg-4">
<p> <input type="checkbox" id="theday" name="theday" value="theday">
<label for="theday"> Which day did you watch</label><br></p>
</div>
<div class="col-lg-4">
</div>
</div>
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
<textarea id="review" name="review" rows="4" cols="50" placeholder="add a rewiev">
</textarea>
</div>
<div class="col-xs-4">
</div>
</div>
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
<p>Tags Press Tab to complete, Enter to create</p>
</div>
<div class="col-xs-4">
<p>Rating</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
<input placeholder="eg. netflix"></input>
</div>
<div class="col-xs-4">
<p>5 stars </p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
