Rachel Andrew rachelandrew

Grid example of fixed size spanner getting extra space

I have a grid container sized in absolute units, with grid tracks also sized using absolute units. The sum of the tracks in both directions is smaller than the container.

Using the keyword values space-around and space-between increases the spacing between tracks. Any grid area that spans one of these gaps thus gains width or height as the space is added to the total width/height.

A Pen by rachelandrew on CodePen.

Platform Wish List

Rachel Andrew ([email protected])

The gap properties from Box Alignment for Flexbox.

Firefox have implemented, and an issue we have with Chrome is that grid-gap, grid-column-gap and grid-row-gap have been unprefixed as per the spec (they came out of grid layout). Without the Flex implementation, we can't use Feature Queries to check for column-gap support when using Flexbox, as Chrome does support column-gap, just not in Flex layout.

Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=762679
Example which works in Firefox: https://codepen.io/rachelandrew/pen/KrqBbg

Authors Guide: Article Template

Please submit your article including all of the information below. You can include this as a seperate file if you like - but please complete each section. Please use an online service to write your article, for example Dropbox Paper, Draft.in, Google Docs. For more help, see the editorial guide

Article Title

Ideally under 67 characters, what problem does this article solve?

Quick Summary

	<div vocab="http://schema.org/" typeof="Recipe">
	<h1 property="name"><perch:content id="title" type="text" label="Recipe title" required="true" /></h1>
	<p>By <span property="author"><perch:content id="author" type="text" label="Author" required="true" /></span>,
	<meta property="datePublished" content="<perch:content id="date" type="date" label="Published date" format="Y-m-d" />"><perch:content id="date" type="date" label="Published date" format="F j, Y" /></p>
	<img property="image" src="<perch:content type="image" label="Image" id="Image" width="800" />" alt="<perch:content id="alt" type="text" label="Image description" />" />
	<div property="description"><perch:content id="description" type="textarea" label="Description" size="s" markdown="true" editor="markitup" required="true" /></div>
	<p>Prep Time: <meta property="prepTime" content="PT<perch:content id="preptime" type="text" label="Prep time" required="true" help="Add the preparation time as a number in minutes" size="s" />M" /><perch:content i

	<div vocab="http://schema.org/" typeof="Recipe">
	<h1 property="name">Mom's World Famous Banana Bread</h1>
	<p>By <span property="author">John Smith</span>,
	<meta property="datePublished" content="2014-07-23">July 23, 2014</p>
	<img property="image" src="/perch/resources/banana-bread-w800.jpg" alt="Banana bread - image credit vialbost on Flickr" />
	<div property="description"><p>This classic banana bread recipe comes from my mom — the walnuts add a nice texture and flavor to the banana bread.</p></div>
	<p>Prep Time: <meta property="prepTime" content="PT15M" />15 minutes
	<br />Cook time: <meta property="cookTime" content="PT60M" />60 minutes
	<br />Yield: <span property="recipeYield">1 loaf</span></p>

	# This is a basic VCL configuration file for varnish. See the vcl(7)
	# man page for details on VCL syntax and semantics.
	#
	# Default backend definition. Set this to point to your content
	# server.
	#
	vcl 4.0;

	backend default {
	.host = "127.0.0.1";