CODEWITHSUNDEEP
htmlcss
yasarui
yasarui

Reputation: 6553

create a custom layout using css grid

I am creating a custom layout using css grid like below. I am able to create most of the part but Main and Right div is not equal in my code. how to have equal width for the main and right div

Expected Output

enter image description here

current Output

enter image description here

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:auto auto;
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/5;
}
.menu{
  grid-row:2/4;
}
.footer{
  grid-column:2/5
}
.main{
  grid-column:2/2;
}
.right{
  grid-column:3/5;
}
<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Upvotes: 1

Views: 1334

Answers (4)

Ashan
Ashan

Reputation: 63

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:auto auto;
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/5;
}
.menu{
  grid-row:2/4;
}
.footer{
  grid-column:2/5
}
.main{
  grid-column:2/4;
}
.right{
  grid-column:4/5;
}

<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Upvotes: 1

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8078

You could have more control by setting the grid-template-columns: to a value in a way that we can control spacing later. I have used grid-template-columns:repeat(8,1fr).You can do adjustments as per your requirement( We don't make layout just for one screen but for many screens). This will control most of them. For mobile your can change this as per your requirement using media queries :)

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:repeat(8,1fr);
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/9;
}
.menu{
  grid-column:1/3;
  grid-row:2/4
}
.footer{
  grid-column:3/9;
}
.main{
  grid-column:3/6;
}
.right{
  grid-column:6/9;
}
<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Upvotes: 1

Tudor Alexandru
Tudor Alexandru

Reputation: 269

A better and simple solution is to use areas, with the grid-area property you give a name to each box and with the grid-template-areas property you have full control over the layout.

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns: auto 1fr 1fr;

  grid-template-areas: 
  "header header header"
  "menu main right"
  "menu footer footer"
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-area: header;
}
.menu{
  grid-area: menu;
}
.footer{
  grid-area: footer;
}
.main{
  grid-area: main;
}
.right{
  grid-area: right;
}
<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114991

Use three columns grid-template-columns:auto 1fr 1fr:

This allows the menu to be a wide as it requires with the remaining width split equally between the other two elements.

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:auto 1fr 1fr;
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/-1;
}
.menu{
  grid-row:2/4;
}
.footer{
  grid-column:2/-1
}
.main{
  grid-column:2 ;
}
.right{
  grid-column:3;
}
<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Upvotes: 1

Related Questions