• Absolute positioning means elements are taken out of document flow and risk overlaps • Redundant markup and positioning oddities with display: table • White space issues with inline-block
learning non-obvious concepts. • Compromises in terms of document semantics in order to achieve responsive layouts. • Needing to lean on frameworks to help with complex maths. • Adding markup to create grids • Using preprocessors to abstract layout hacks
understand themselves as part of an overall layout. • True separation of document source order and visual display. • Precise control of alignment - horizontally and vertically. • Responsive and flexible by default.
element. The grid has 3 equal width columns. Rows will be created as required as we position items into them. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
source order and using Grid or Flexbox to get the optimal display for each device. • Bad = using Grid or Flexbox as an excuse to forget about the source. • Terrible - stripping out semantic elements to make everything a grid or flex item.
features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.” - https://drafts.csswg.org/css-align/
items at each end are placed against the container and the remaining space distributed evenly. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
items are evenly distributed in the container with a half size space at each end. nav ul{ display: flex; justify-content: space-around; flex-direction: row; }
I add extra text in one navigation point the others all take the same height. nav ul{ display: flex; justify-content: space-around; flex-direction: row; align-items: stretch; }
of align- items to center then we get horizontal centring. nav ul{ display: flex; justify-content: space-around; flex-direction: column; align-items: center; }
target individual flex items. In this example I have set the group to centre, but the third item to stretch. nav ul{ display: flex; justify-content: space-around; flex-direction: row; align-items: center; } nav li:nth-child(3) { align-self: stretch; }
200px; If we allow the flex items to wrap we can see how flex-basis works by dragging the window smaller. .boxes { display: flex; flex-flow: row wrap; justify-content: space-around; } .box { flex: 1 1 200px; min-width: 1px; }
200px; The initial width of our box is 200 pixels, it can shrink smaller than 200 pixels but may not get larger. .boxes { display: flex; justify-content: space-around; } .box { flex: 0 1 200px; min-width: 1px; }
will be assigned twice of much of the available free space after we have reached the 200 pixel initial width. .boxes { display: flex; justify-content: space-around; } .box { flex: 1 1 200px; min-width: 1px; } .box3 { 2 1 200px; }
pixels and then have two 1fr columns the 600 pixel track is removed from the available space and the remainder is distributed equally between the two columns. .wrapper { display: grid; grid-template-columns: 600px 1fr 1fr; }
a 3fr column. The 600 pixels is removed from the available space then the remaining space is divided by 4. The 1fr column gets 25% and the 3fr column 75%. .wrapper { display: grid; grid-template-columns: 600px 1fr 3fr; }
current Edge • Implementation of most of the current spec behind a flag in Blink • Prefixed in Webkit Nightlies • Partial implementation in Firefox Nightlies • Edge have updating to current spec as ‘High Priority’ on the backlog