diff options
| author | johannst <johannst@users.noreply.github.com> | 2022-09-30 10:58:40 +0000 |
|---|---|---|
| committer | johannst <johannst@users.noreply.github.com> | 2022-09-30 10:58:40 +0000 |
| commit | fa7eb205d5f18b72c1e04a4229d171a15040bdea (patch) | |
| tree | 2b9965406fb65fdc44ec3eddd2924e5be3f06c8e /web/src/grid-area.html | |
| parent | 0c31b8e434d634c81479bf396c752d1baaff7603 (diff) | |
| download | notes-fa7eb205d5f18b72c1e04a4229d171a15040bdea.tar.gz notes-fa7eb205d5f18b72c1e04a4229d171a15040bdea.zip | |
deploy: b6f25b16f1f23b0169e8f076e79ee4964b81db99
Diffstat (limited to 'web/src/grid-area.html')
| -rw-r--r-- | web/src/grid-area.html | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/web/src/grid-area.html b/web/src/grid-area.html new file mode 100644 index 0000000..f3f4fde --- /dev/null +++ b/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> + |