mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-19 20:31:32 +02:00
feat: Update contents
This commit is contained in:
Phuoc Nguyen
231
contents/holy-grail.mdx
Normal file
231
contents/holy-grail.mdx
Normal file
@@ -0,0 +1,231 @@
|
||||
---
|
||||
category: Layout
|
||||
created: '2019-11-16'
|
||||
description: Create a holy grail layout with CSS flexbox
|
||||
keywords: css flexbox, css holy grail layout, css layout
|
||||
thumbnail: /assets/css-layout/thumbnails/holy-grail.png
|
||||
title: Holy grail
|
||||
---
|
||||
|
||||
## HTML
|
||||
|
||||
```html
|
||||
<div class="holy-grail">
|
||||
<header>...</header>
|
||||
<main class="holy-grail__main">
|
||||
<!-- Left sidebar -->
|
||||
<aside class="holy-grail__left">...</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<article class="holy-grail__middle">...</article>
|
||||
|
||||
<!-- Right sidebar -->
|
||||
<nav class="holy-grail__right">...</nav>
|
||||
</main>
|
||||
<footer>...</footer>
|
||||
</div>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
.holy-grail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.holy-grail__main {
|
||||
/* Take the remaining height */
|
||||
flex-grow: 1;
|
||||
|
||||
/* Layout the left sidebar, main content and right sidebar */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.holy-grail__left {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.holy-grail__middle {
|
||||
/* Take the remaining width */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.holy-grail__right {
|
||||
width: 20%;
|
||||
}
|
||||
```
|
||||
|
||||
<Playground>
|
||||
```css placeholders.css hidden
|
||||
.lines {
|
||||
padding: 0.25rem 0;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.line {
|
||||
background: #d1d5db;
|
||||
height: 1px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.line.line--20 {
|
||||
width: 20%;
|
||||
}
|
||||
.line.line--40 {
|
||||
width: 40%;
|
||||
}
|
||||
.line.line--60 {
|
||||
width: 60%;
|
||||
}
|
||||
.line.line--80 {
|
||||
width: 80%;
|
||||
}
|
||||
.line.line--100 {
|
||||
width: 100%;
|
||||
}
|
||||
.rectangle {
|
||||
background: #d1d5db;
|
||||
border-radius: 0.25rem;
|
||||
height: var(--rectangle-height);
|
||||
width: var(--rectangle-width);
|
||||
}
|
||||
.rectangle--hor.rectangle--20 {
|
||||
--rectangle-width: 20%;
|
||||
}
|
||||
.rectangle--hor.rectangle--40 {
|
||||
--rectangle-width: 40%;
|
||||
}
|
||||
.rectangle--hor.rectangle--60 {
|
||||
--rectangle-width: 60%;
|
||||
}
|
||||
.rectangle--hor.rectangle--80 {
|
||||
--rectangle-width: 80%;
|
||||
}
|
||||
.rectangle--hor.rectangle--100 {
|
||||
--rectangle-width: 100%;
|
||||
}
|
||||
.rectangle--hor.rectangle--sm {
|
||||
--rectangle-height: 0.5rem;
|
||||
}
|
||||
.rectangle--hor.rectangle--md {
|
||||
--rectangle-height: 2rem;
|
||||
}
|
||||
.rectangle--hor.rectangle--lg {
|
||||
--rectangle-height: 4rem;
|
||||
}
|
||||
.rectangle--ver.rectangle--20 {
|
||||
--rectangle-height: 20%;
|
||||
}
|
||||
.rectangle--ver.rectangle--40 {
|
||||
--rectangle-height: 40%;
|
||||
}
|
||||
.rectangle--ver.rectangle--60 {
|
||||
--rectangle-height: 60%;
|
||||
}
|
||||
.rectangle--ver.rectangle--80 {
|
||||
--rectangle-height: 80%;
|
||||
}
|
||||
.rectangle--ver.rectangle--100 {
|
||||
--rectangle-height: 100%;
|
||||
}
|
||||
.rectangle--ver.rectangle--sm {
|
||||
--rectangle-width: 0.5rem;
|
||||
}
|
||||
.rectangle--ver.rectangle--md {
|
||||
--rectangle-width: 2rem;
|
||||
}
|
||||
.rectangle--ver.rectangle--lg {
|
||||
--rectangle-width: 4rem;
|
||||
}
|
||||
```
|
||||
|
||||
```css styles.css hidden
|
||||
body {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.holy-grail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Demo */
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.25rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.holy-grail__header,
|
||||
.holy-grail__footer {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.holy-grail__main {
|
||||
border-top: 1px solid #d1d5db;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
|
||||
/* Take the remaining height */
|
||||
flex-grow: 1;
|
||||
|
||||
/* Layout the left sidebar, main content and right sidebar */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.holy-grail__left {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.holy-grail__middle {
|
||||
border-left: 1px solid #d1d5db;
|
||||
border-right: 1px solid #d1d5db;
|
||||
|
||||
/* Take the remaining width */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.holy-grail__right {
|
||||
width: 20%;
|
||||
}
|
||||
```
|
||||
|
||||
```html index.html hidden
|
||||
<div class="holy-grail">
|
||||
<div class="holy-grail__header"><div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div></div>
|
||||
<div class="holy-grail__main">
|
||||
<div class="holy-grail__left">
|
||||
<div class="lines">
|
||||
<div class="line line--20"></div>
|
||||
<div class="line line--80"></div>
|
||||
<div class="line line--40"></div>
|
||||
<div class="line line--60"></div>
|
||||
<div class="line line--20"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="holy-grail__middle">
|
||||
<div class="lines">
|
||||
<div class="line line--20"></div>
|
||||
<div class="line line--80"></div>
|
||||
<div class="line line--40"></div>
|
||||
<div class="line line--60"></div>
|
||||
<div class="line line--20"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="holy-grail__right">
|
||||
<div class="lines">
|
||||
<div class="line line--20"></div>
|
||||
<div class="line line--80"></div>
|
||||
<div class="line line--40"></div>
|
||||
<div class="line line--60"></div>
|
||||
<div class="line line--20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="holy-grail__footer"><div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div></div>
|
||||
</div>
|
||||
```
|
||||
</Playground>
|
||||
Reference in New Issue
Block a user