Skip to content

Instantly share code, notes, and snippets.

@neoadventist

neoadventist/css-grid.html

Last active March 8, 2019 23:44
Show Gist options
  • Save neoadventist/68f3adf81ef8dd5fb01e80c0211c4df8 to your computer and use it in GitHub Desktop.
Save neoadventist/68f3adf81ef8dd5fb01e80c0211c4df8 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Grid Layout Example
Raw
css-grid.html
<html>
<style>
.container{
}
.container > div{
background-color:#DDD;
padding:10px;
}
.container > div:nth-child(odd){
background-color:#EEE;
}
#example1 {
display:grid;
grid-template-columns:[first] 25% auto 25%;
}
#example2{
display:grid;
height:500px; //you must define the height of the grid if you want to set the rows.
grid-template-columns:[first] 200px 40% auto; //creates three columns
grid-template-rows:10% 1fr 10%; //for each of the three rows define the height
grid-template-areas:
'header header header'
'list feed feed'
'footer footer footer'
}
#example2 > div:nth-child(1){
grid-area:header;
background-color:pink;
}
#example2 > div:nth-child(2){
grid-area:list;
font-size:10px;
border: 10px red solid;
}
#example2 > div:nth-child(3){
grid-area:feed;
}
#example2 > div:nth-child(4){
grid-area:footer;
background-color:green;
}
.conversation-list-container{
display:grid;
grid-template-columns:auto 50px;
}
</style>
<body>
<h1>Hello World CSS Grid</h1>
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<hr/>
<div class="container" id="example2">
<div>Care3 Header</div>
<div>
<div class="conversation-list-container">
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
<div>Conversation Title</div><button>Open</button>
</div>
</div>
<div>Conversation</div>
<div>Care3 Footer</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment