display: grid - ue22-p25-frontend

tools = require('../js/tools'); tools.init()

purpose¶

create grid-based layouts, obviously
grid is now available in all popular modern browsers

ex1 - proportional columns¶

next snippet demontrates:

a proportional grid of [3 rows ⨉ 4 columns]
with 4 areas defined, based on that tiling header, main, sidebar, and footer
and 4 <div>s that are mapped on these areas e.g. grid-area: header

all this in one property:

grid_html = `<div class="container">
  <div id="item-a">
    the header<br>blabla
  </div>
  <div id="item-b">
    main area<br>blabla<br>blabla
  </div>
  <div id="item-c">
    side bar<br>blabla
  </div>
  <div id="item-d">
    a footer<br>blabla
  </div>
</div>`

grid1_css = `.container {
  display: grid;
  grid-template-columns:
    1fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "main   main   .      sidebar"
    "footer footer footer sidebar";
}

#item-a {
    grid-area: header;
    background-color: #ffba5a;
}
#item-b {
    grid-area: main;
    background-color: #3282b8;
}
#item-c {
    grid-area: sidebar;
    background-color: #db3056;
}
#item-d {
    grid-area: footer;
    background-color: #7fa998;
}`
tools.sample_from_strings({html: grid_html, css: grid1_css}, {id: 'grid-1', start_with: 'css', height: "16em"})

ex2 - partially fixed columns¶

mostly the same, but :

we can specify fixed size for some columns
only change is to replace
- grid-template-columns: 1fr 1fr 1fr 1fr with
- grid-template-columns: 100px 1fr 5% 1fr;

and now

the first column has a fixed size
the third column has a size proportional to the page width
and columns 2 and 4 equally share whatever is left in width

grid2_css = `.container {
  display: grid;
  grid-template-columns:
    100px 1fr 5% 1fr;
  grid-template-areas:
    "header header header header"
    "main   main   .      sidebar"
    "footer footer footer footer";
}

#item-a {
    grid-area: header;
    background-color: #ffba5a;
}
#item-b {
    grid-area: main;
    background-color: #3282b8;
}
#item-c {
    grid-area: sidebar;
    background-color: #db3056;
}
#item-d {
    grid-area: footer;
    background-color: #7fa998;
}`

tools.sample_from_strings({html: grid_html, css: grid2_css}, {id: 'grid-2', start_with: 'css', height: "16em"})

ex3 - on rows too¶

in the previous examples :

we have not imposed anything on the height of the result
each box gets its height based on its content
it is also possible - although less often needed
to fix a height globally and arrange the rows accordingly
only change is to add on the grid:
- height: 100vh to say we want to use all viewport height
- grid-template-rows: 50px 1fr 100px;
  which specifies how to use vertical space

grid3_css = `.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
  grid-template-rows: 50px 1fr 100px;
  height: 100vh;
}

#item-a {
    grid-area: header;
    background-color: #ffba5a;
}
#item-b {
    grid-area: main;
    background-color: #3282b8;
}
#item-c {
    grid-area: sidebar;
    background-color: #db3056;
}
#item-d {
    grid-area: footer;
    background-color: #7fa998;
}
`
tools.sample_from_strings({html: grid_html, css: grid3_css}, {start_with: 'css', height: "16em"})

assignment: the css-tricks page¶

browse quickly - but entirely - the very good introduction to grids that can be found on css-tricks.com so as to get a good grip of what’s achievable

more vs-code tricks¶

insert a wrapping tag¶

when using these technologies, you are often in a position to add wrapping tags in your html

to do this easily under vs-code :

select the text you want to wrap
enter the palette - the swiss knife in vs-code
(mac: ⌘-⇧-p - Windows ⌃-⇧-p - in doubt, ask google)
type Emmet wrap with abbreviation
enter the tag name

in pictures: if you need to add a wrapping <div> / </div> around some text, select it

then activate the palette and search for ‘emmet: wrap with abbreviation’

select that function, you will be prompted for the name of the wrapping tag

custom keybinding¶

it is rather straightforward to attach a custom keybinding to that function if you use it often
start with .. the palette, of course

for example here, we just type ‘Alt-o’ and the shortcut gets recorded from now on