training • Compromised document semantics. • Needing to lean on frameworks to help with complex maths. • Adding markup to create grids • Using preprocessors to abstract layout hacks
examples work in Chrome unprefixed - you need to enable the Experimental Web Platform Features flag. Mozilla are currently implementing Grid in Firefox. Enable the flag if not using a Nightly or Dev Edition. You can also use Webkit nightlies/Safari Developer Preview. IE10 and up has support for the old syntax, with an -ms prefix. Grid is on the Edge backlog, marked as High Priority.
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; }
the tallest item is dictating the height of the flex container. The second is entered in the container. The third aligned to the start. The fourth aligned to the end. .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: flex-start; } .wrapper li:nth-child(4) { align-self: flex-end; }
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; }
being developed your feedback is wanted and can be included in the spec. • Wait until browsers ship and you lose that chance. • It just got easier. The CSS WG has moved spec issues to GitHub. http://logs.csswg.org/irc.w3.org/css/2016-05-10/#e684439