mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
5ef98aac90
* Initial layout guide stuff * More docs on layout - grid * Continuing grid docs * Grid gutter and spans guide * Improvements to layout docs for horizontal, vertical, dock, and begin describing layers * Update center layout example to reflect new yield order * More updates to layout guide, mostly offset stuff * More layout guide, "Putting it all together" * Updates to layout guide page * Small rewording of dock layout in guide * Apostrophe * Typo * Small design tweak to combining layouts example * Typos, tidying up * Small reword * Some updates to docs/guide/layout/grid * calc fix Co-authored-by: Will McGugan <willmcgugan@gmail.com>
51 lines
753 B
CSS
51 lines
753 B
CSS
#app-grid {
|
|
layout: grid;
|
|
grid-size: 2; /* two columns */
|
|
grid-columns: 1fr;
|
|
grid-rows: 1fr;
|
|
}
|
|
|
|
#left-pane > Static {
|
|
background: $boost;
|
|
color: auto;
|
|
margin-bottom: 1;
|
|
padding: 1;
|
|
}
|
|
|
|
#left-pane {
|
|
row-span: 2;
|
|
background: $panel;
|
|
border: dodgerblue;
|
|
}
|
|
|
|
#top-right {
|
|
background: $panel;
|
|
border: mediumvioletred;
|
|
}
|
|
|
|
#top-right > Static {
|
|
width: auto;
|
|
height: 100%;
|
|
margin-right: 1;
|
|
background: $boost;
|
|
}
|
|
|
|
#bottom-right {
|
|
layout: grid;
|
|
grid-size: 3;
|
|
grid-columns: 1fr;
|
|
grid-rows: 1fr;
|
|
grid-gutter: 1;
|
|
background: $panel;
|
|
border: greenyellow;
|
|
}
|
|
|
|
#bottom-right-final {
|
|
column-span: 2;
|
|
}
|
|
|
|
#bottom-right > Static {
|
|
height: 100%;
|
|
background: $boost;
|
|
}
|