.container {
display : grid ;
grid-template-rows : repeat ( 3 , 100px );
/*grid-template-columns: repeat(2,100px);*/
/*🔅*/
grid-template-columns : 30% 70% ;
border : 3px solid lightgray ;
height : 100vh ;
}
.box {
background-color : gold ;
}
Enter fullscreen mode
Exit fullscreen mode
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title> Document</title>
<link rel= "stylesheet" href= "style.css" />
</head>
<body>
<!-- 💛 -->
<div class= "container" >
<div class= "box" > A</div>
<div class= "box" > B</div>
<div class= "box" > C</div>
<div class= "box" > D</div>
</div>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
Top comments (0)