diff options
| author | Johannes Stoelp <johannes.stoelp@gmail.com> | 2022-09-29 22:36:08 +0200 |
|---|---|---|
| committer | Johannes Stoelp <johannes.stoelp@gmail.com> | 2022-09-29 22:36:08 +0200 |
| commit | 1bee8cd8ae939d5f818a977400daf9db6904f868 (patch) | |
| tree | cde0a72d3e6479df0e1ff87d35d50791ee42db93 /src | |
| parent | 99c1f88e7396ee87a812f8d114aac8d903eb7afb (diff) | |
| download | notes-1bee8cd8ae939d5f818a977400daf9db6904f868.tar.gz notes-1bee8cd8ae939d5f818a977400daf9db6904f868.zip | |
html: small grid area example
Diffstat (limited to 'src')
| -rw-r--r-- | src/web/html.md | 5 | ||||
| -rw-r--r-- | src/web/src/grid-area.html | 55 |
2 files changed, 60 insertions, 0 deletions
diff --git a/src/web/html.md b/src/web/html.md index 7561cf4..e31f325 100644 --- a/src/web/html.md +++ b/src/web/html.md @@ -13,3 +13,8 @@ {{#include src/grid-2col.html }} ``` +# Minimal grid area +[Rendered html](src/grid-area.html) +```html +{{#include src/grid-area.html }} +``` diff --git a/src/web/src/grid-area.html b/src/web/src/grid-area.html new file mode 100644 index 0000000..f3f4fde --- /dev/null +++ b/src/web/src/grid-area.html @@ -0,0 +1,55 @@ +<style> +.page-grid { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-areas: + "h h" + "s m" + "f f"; + gap: 1em; +} +.gh { + grid-area: h; + background-color: orange; +} +.gs { + grid-area: s; + background-color: green; +} +.gm { + grid-area: m; + background-color: gray; +} +.gf { + grid-area: f; + background-color: yellow; +} +.nav-items { + display: flex; /* flexbox model => flexible layout on row */ + justify-content: space-around; /* align flex boxes horizontally with space around */ + align-items: center; /* center flex items vertically */ + list-style: none; +} +p { + margin: 1em; +} +</style> +<div class="page-grid"> + <div class="gh"> + <ul class="nav-items"> + <li class="nav-item"><a href="">aa</a></li> + <li class="nav-item"><a href="">bb</a></li> + <li class="nav-item"><a href="">cc</a></li> + </ul> + </div> + <div class="gs"> + <p>Some text in the second column.</p> + </div> + <div class="gm"> + <p>Some text in the second column.</p> + </div> + <div class="gf"> + <p>Some text in the second column.</p> + </div> +</div> + |