CSS Grid Layout

css-grid-layout.markdown

CSS Grid Layout

A Pen by Michael Garten on CodePen.

License.

index.html

<div class='grid-container'>
  <div class='logo'></div>
  <div class='editor-tabs'></div>
  <div class='editor-panels'></div>
  <div class='context-panels'></div>
  <div class='context-tabs'></div>
  <div class='menu-bar'></div>
  <div class='settings'></div>
  <div class='context-actions'></div>
  <div class='editor-actions'></div>
  <div class='account-tabs'></div>
  <div class='account-panels'></div>
  <div class='repo-actions'></div>
</div>

style.css

html,
body {
  margin: 0;
  height: 100%;
  background-color: #333;
}
.grid-container * {
  border: 1px solid #ccc;
}
.grid-container div:after {
  content: attr(class);
  color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: arial;
}
.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 60px auto 2fr auto;
  grid-template-rows: 50px 1.2fr 30px;
  grid-template-areas: "logo context-tabs editor-tabs account-tabs" "menu-bar context-panels editor-panels account-panels" "settings context-actions editor-actions repo-actions";
}
.logo {
  grid-area: logo;
}
.editor-tabs {
  grid-area: editor-tabs;
}
.editor-panels {
  grid-area: editor-panels;
}
.context-panels {
  grid-area: context-panels;
}
.context-tabs {
  display: grid;
  grid-area: context-tabs;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1px 1px;
  grid-template-areas: ". ." ". .";
}
.menu-bar {
  grid-area: menu-bar;
}
.settings {
  grid-area: settings;
}
.context-actions {
  grid-area: context-actions;
}
.editor-actions {
  grid-area: editor-actions;
}
.account-tabs {
  grid-area: account-tabs;
}
.account-panels {
  grid-area: account-panels;
}
.repo-actions {
  grid-area: repo-actions;
}