California Says Autonomous Cars Don’t Need Human Drivers

  • Bloomberg

    Connecting decision makers to a dynamic network of information, people and ideas, Bloomberg quickly and accurately delivers business and financial information, news and insight around the world.

    Customer Support

    Americas
    +1 212 318 2000

    Europe, Middle East, & Africa
    +44 20 7330 7500

    Asia Pacific
    +65 6212 1000

  • Company

    Communications

    Follow Us

  • Financial Products

    Bloomberg Customers

  • Enterprise Products

    Industry Products

  • Media

    Media Services

  • Bloomberg

    Connecting decision makers to a dynamic network of information, people and ideas, Bloomberg quickly and accurately delivers business and financial information, news and insight around the world.

    Customer Support

    Americas
    +1 212 318 2000

    Europe, Middle East, & Africa
    +44 20 7330 7500

    Asia Pacific
    +65 6212 1000

    Communications

    Follow Us

  • Company

    Media

    Media Services

  • Financial Products

    Enterprise Products

    Industry Products

    Bloomberg Customers

by

March 10, 2017, 3:38 PM EST

March 10, 2017, 5:03 PM EST

  • New draft regulations reverse earlier rules that irked Google
  • State also backs off requirement that cars have steering wheel
The two-seater prototype of Google’s self-driving car.

Photographer: LiPo Ching/Bay Area News Group/TNS via Getty Images

California relaxed several rules on self-driving cars as the state tries to maintain its status as a leading test bed for the future of transportation.

The state’s Department of Motor Vehicles released proposed regulations Friday for autonomous vehicles, dropping an earlier requirement that a human driver had to be present while testing on public roads. The DMV also backed down on a previous rule that vehicles needed a steering wheel and pedals for the operator to take back control.

“When we think of driverless vehicles they can either have conventional controls, which are steering wheels, pedals, things like that, or they cannot,” said California DMV Chief Counsel Brian Soublet during a conference call with reporters.

If companies test vehicles without conventional controls, they have to show the California DMV that they have approval from the National Highway Traffic Safety Administration, he added. NHTSA said in early 2016 that self-driving software systems, not just humans, can be considered drivers.

“If California was going to keep that level of development activity in the state, what they did was necessary and timely, ”said Eric Noble, president of The CarLab, an automotive consulting firm. “They kind of had to do it because at some point manufacturers can’t move autonomous vehicles forward without getting controls out of cars.”

Exclusive insights on technology around the world.

Get Fully Charged, from Bloomberg Technology.

California’s change of heart is likely good news for Mountain View, California-based Alphabet Inc., which is developing self-driving software and vehicles through its Waymo division. When the state’s DMV published draft regulations in late 2015 that required human drivers, a steering wheel and pedals, the company was “gravely disappointed.” Google had recently built prototypes with no steering wheel or pedals, and it had to retrofit them to continue testing in California.

California’s new proposals follow a Michigan law passed in December, which allowed testing with no human driver. It also created a framework for selling autonomous cars which the California DMV also added to its proposed rules on Friday.

The proposed regulations have a 45-day public comment period that ends April 24. That will be followed by a public hearing. During Friday’s conference call, the California DMV said the rules should be completed by the end of the year.

<ol class=”noscript-footnotes”></ol>

Before it’s here, it’s on the Bloomberg Terminal.

LEARN MORE

<iframe src=’https://www.googletagmanager.com/ns.html?id=GTM-MNTH5N’ height=’0′ width=’0′ style=’display:none;visibility:hidden’></iframe>

Play Video

This is a modal window.

An error has occurred. Reload the web page or use another browser.

Error 5

Captions Settings Dialog

Beginning of dialog window. Escape will cancel and close the window.

Text
Color

White
Black
Red
Green
Blue
Yellow
Magenta
Cyan

Transparency

Opaque
Semi-Opaque

Background
Color

Black
White
Red
Green
Blue
Yellow
Magenta
Cyan

Transparency

Opaque
Semi-Transparent
Transparent

Window
Color

Black
White
Red
Green
Blue
Yellow
Magenta
Cyan

Transparency

Transparent
Semi-Transparent
Opaque

Font Size

50%
75%
100%
125%
150%
175%
200%
300%
400%

Text Edge Style

None
Raised
Depressed
Uniform
Dropshadow

Font Family

Proportional Sans-Serif
Monospace Sans-Serif
Proportional Serif
Monospace Serif
Casual
Script
Small Caps

Defaults
Done

Raymond police chief denies censoring of critical comments on department’s Facebook page | New Hamps…

To improve the chance of seeing your comment posted here or published in the New Hampshire Union Leader:

  • Identify yourself. Accounts using fake or incomplete names are suspended regardless of the quality of posts.
  • Say something new, stay on topic, keep it short.
  • Links to outside URLs are discouraged, if used they should be on topic.
  • Avoid comments in bad taste, write well, avoid using all capital letters
  • Don’t cite facts about individuals or businesses without providing a means to verify the claim
  • If you see an objectionable comment please click the “Report Abuse” button and be sure to tell us why.

Note: Comments are the opinion of the respective poster and not of the publisher.

Steve Johnson said Saturday, March 11, 2017 at 7:17 am
It looks like the cops are lying…no surprise really.

REPORT ABUSE

John Roberts said Saturday, March 11, 2017 at 8:28 am
As someone who knows 2 people banned for making critical comments the chief is a LIAR! The RPD is a corrupt orginization that not only violates the 4th Amendment but now the 1st Amendment rights of people. Be prepared taxpayers of Raymond as I think there will be a long and drawn out civil suit you will lose!

REPORT ABUSE

Jane Aitken said Saturday, March 11, 2017 at 10:32 am
Seems that many government agencies in NH still do not understand their obligations, and our rights, under NH’s RSA 91-A laws… Right to Know and also First Amendment rights. As we speak today, someone is being denied the right to film a town’s deliberative session. Don’t they know they will lose in court if sued? Good grief.

REPORT ABUSE

William Merrow said Saturday, March 11, 2017 at 10:40 am
Cop malfeasance keeps growing, permitted by the AGs. It’s past time that there were Civilian Over-site boards. Read “Vigilante shoots at caa Weare cop shooting at fleeing car and hits person in the BACK of his head, man dies!

REPORT ABUSE

Bill McGonigle said Saturday, March 11, 2017 at 11:24 am
Are they actually saying, “we don’t delete posts, we ban this person from speaking,” in response to a 1A complaint? I would be surprised if the government can impose any speech code on a Facebook page.But if the complainant really did hide his own comments and is playing the PD and ACLU, that would be a darn shame. FB should be able to answer these questions in a discovery request, so nobody should be trying to hide anything here – it will turn out badly for them.

REPORT ABUSE

You must sign in before you can post comments. If you are experiencing issues with your account please e-mail abuse@unionleader.com.

 RETURN TO ARTICLE

Rand Paul Introduces His Own Obamacare Replacement Plan – Read All 4 Pages Here! – C.S.C. Media Grou…

U.S. Senator and physician Rand Paul introduced S. 222, the Obamacare Replacement Act, to provide Congress with a health care plan grounded in broadly supported conservative reforms that is ready for an immediate vote after Obamacare is repealed. Dr. Rand Paul’s proposal would expand access to higher-quality, lower-cost health care for more Americans, regardless of medical history.

“Getting government out of the American people’s way and putting them back in charge of their own health care decisions will deliver a strong, efficient system that doesn’t force them to empty out their pockets to cover their medical bills,” said Dr. Rand Paul. “There is no excuse for waiting to craft an alternative until after we repeal Obamacare, and the Obamacare Replacement Act charts a new path forward that will insure the most people possible at the lowest price.”

The Obamacare Replacement Act empowers the American people to: 1.) Choose inexpensive insurance free of government dictates; 2.) Save unlimited amounts in a health savings account (HSA) and have wider options for using those funds; 3.) Buy insurance across state lines; and 4.) Join together in voluntary associations to gain the leverage of being part of a large insurance pool.

Dr. Rand Paul has led the charge to replace Obamacare at the same time it is repealed, and he has been joined in calling for simultaneous action by fellow Republicans including President Trump and Speaker of the House Paul Ryan.

Dr. Rand Paul’s Obamacare Replacement Act, S. 222:

Legalizes Inexpensive Insurance Plans:

  • Ensures that Americans can purchase the health insurance coverage that best fits their needs.
  • Eliminates Obamacare’s essential health benefits requirement, along with other restrictive coverage and plan requirements, to once again make low-cost insurance options available to American consumers.

Protects Individuals with Pre-Existing Conditions:

  • Provides a two-year open-enrollment period under which individuals with pre-existing conditions can obtain coverage.
  • Restores HIPAA pre-existing conditions protections. Prior to Obamacare, HIPAA guaranteed that those in the group market could obtain continuous health coverage regardless of preexisting conditions.

Helps More People Save To Buy Health Insurance and Cover Medical Costs:

  • Incentivizes savings by authorizing a tax credit (up to $5,000 per taxpayer) for individuals and families that contribute to HSAs.
  • Removes the annual cap on HSAs so individuals can make unlimited contributions.
  • Allows HSA funds to be used to purchase insurance, cover premiums, and more easily afford a broader range of health-related expenses, including prescription and OTC drugs, dietary supplements, nutrition and physical exercise expenses, and direct primary care, among others. 

Guarantees Fair Tax Treatment of Health Insurance:

  • Equalizes the tax treatment of the purchase of health insurance for individuals and employers by allowing individuals to deduct the cost of their health insurance from their income and payroll taxes.
  • Frees more Americans to purchase and maintain insurance apart from their work status.
  • Does not interfere with employer-provided coverage for Americans who prefer those plans.

Helps Individuals Join Together to Purchase Insurance:

  • Expands Association Health Plans (AHPs) to allow small business owners and individuals to band together across state lines through their membership in a trade or professional association to purchase health coverage for their families and employees at a lower cost.
  • Also allows individuals to pool together through any organization to purchase insurance.
  • Widens access to the group market and spreads out the risk, enhancing the ability of individuals and small businesses to decrease costs, increase administrative efficiencies, and further protect those with pre-existing conditions.

Allows the Purchase of Insurance Across State Lines:

  • Creates an interstate market that allows insurers who are licensed to sell policies in one state to offer them to residents of any other state.

Increases State Medicaid Flexibility:

  • Enables states to fully exercise current flexibilities afforded to them through Medicaid waivers for creating innovative state plan designs.

Empowers Physicians:

  • Allows non-economically aligned physicians to negotiate for higher quality health care for their patients.
  • Amends the Internal Revenue Code to allow a physician a tax deduction equal to the amount such physician would otherwise charge for charity medical care or uncompensated care due to bad debt, limited to 10% of a physician’s gross income for the taxable year.

Read The Complete Replacement Plan Below

Raymond Police Dept. blocks dissenting views on social media; ACLU of NH responds

Today, the Raymond Police Department received a letter from the American Civil Liberties Union of New Hampshire (ACLU NH) regarding their recent behavior on social media. The police department is currently requesting that Raymond voters agree to spend $6.8 million on a new police station. The current police station was built in the early 1990s. Some people in the community are questioning the need for a new police department and have expressed their concerns and/or dissent on the Raymond Police Department’s Facebook page.

Apparently the Raymond Police Department (RPD) doesn’t really like views that don’t agree with theirs.  It started when two different Raymond residents posted comments on the RPD Facebook page that questioned the need for a new, and rather expensive, police department. Not only were comments deleted but the residents were blocked from posting their views at all on the page. Citizens also commented on the new Constitutional Carry law that went into effect recently and had their comments deleted.

The ACLU NH was notified of this behavior and sent a letter to the Raymond Chief of Police, David Salois, explaining that this is a violation of the 1st Amendment. There are actually court cases about this very issue that have happened elsewhere. From the ACLU’s letter:

The Department has embraced social media as a key means of communicating with the community it serves, including using its Facebook page to invite feedback from the community and to promote its position on various issues. This has included promoting the  Department’s  support for the upcoming police  station bond  vote  (e.g., posts on January  17, 18, 20, 2017  etc.), as well  as providing  commentary  on recent  conceal  carry  legislation  (e.g., February  22, 2017). 1

The page is set up as a public page and states that its purpose “is to allow and encourage communication with the public about topics of interest to the Department including its services, events and other news.” The page goes on to say that “[c]omments that are off topic, contain sexually explicit or obscene material, contain solicitations, harassing or threatening will be removed.”1 Indeed, it appears that Ms. Hanson was blocked following her posts on this February 22, 2017 thread.

The ACLU NH then goes on to explain court cases where precedent has been set regarding the public forum of social media. They further explain that while Dana Hanson’s view may have been critical, she was certainly within her 1st Amendment right to express them on the RPD’s public Facebook page:

As a publicly-funded police department, the Department invites members of its community to engage with it through Facebook in precisely the same way that Loudoun County and its officials did in Virginia.  As  is plain  from the  screenshots  attached  to this letter, far from being “off topic,” “sexually explicit,” or “obscene,” the  speech  that  Ms. Hanson has engaged in demonstrates  exactly the type  of constituent  engagement  and dialogue  the Department’s Facebook page encourages. Indeed, one of Ms. Hanson’s comments deleted by the Department addressing the recent conceal carry legislation stated: “I will say, this is a real eye opener for the residents of Raymond. How their local PD feels about them protecting themselves is paramount to a strong community bond. I’d be weary of putting my faith in the Raymond PD to have my families (and yours) best interest in mind.” Though obviously critical, this speech is precisely the type of political speech that is both constitutionally protected and that has been encouraged by the Department.

As more and more public agencies use social media to disperse information to their constituencies, they must understand the responsibility that comes with upholding the 1st Amendment rights of said constituencies. Ironically, the Raymond Police Department posted earlier today that they supposedly “encourage a vigorous and open debate.” From the RPD Facebook Page:

Prior to posting on the Raymond Police Facebook page look, over our page info tab, under the about section and also Facebook’s own Terms of Service, located at https://www.facebook.com/terms for posting guidance. These set required posts (profiles) guidelines.

Specifically, while we encourage a vigorous and open debate, we do not allow posts which violate those and unfortunately, we have had to report posts (profiles) for violating the above terms. Once Facebook reviews our reports and responds accordingly, further review on our end will occur.

Their actions speak louder than words. They clearly don’t support citizens who engage with their public page if they disagree with the RPD’s opinion, especially when it comes to the new police department they are pushing. Dana Hanson, who was one of the Raymond residents whose comments were deleted and who was then summarily blocked from commenting on the page had the following to say about it:

I am very upset with how the Raymond Police Department has handled opposing opinions on their Facebook page. I hope that the officers respect a difference in opinion but more importantly, our first amendment rights.  This is troubling and makes me worry about ever voicing my opinion again publicly in town.

Given the taxpayers of Raymond pay for the police department and any services they provide, including running their Facebook page, the residents of Raymond should indeed be heard on said page. If a public agency can’t handle dissenting or critical voices, maybe they should look into why there are dissenting and critical voices rather than simply suppressing those people whom they also serve. It also doesn’t fare well for the Raymond Police Department or the town in general that citizens feel they cannot speak up. That’s not how local government is supposed to work.

The entire letter from ACLU NH can be read below:

Related

By Kimberly Morin On March 14th, the Town of Raymond will be holding its annual vote on warrant articles and open elected positions.   There have been some extremely interesting town meetings and deliberative sessions with the school board, the selectmen and a candidates’ night. During some of these meetings it…

February 27, 2017

In “New Hampshire”

UPDATED: Raymond Board of Selectmen verifies story after calling it ‘fake news’

By Kimberly Morin Last night the Raymond Board of Selectmen had their regular meeting. At the end of this meeting, Town Manager brought up a series of Right-to-Know requests that Political Buzz sent yesterday regarding the Police Department Proposal, Food Service Outsourcing Proposal and the elementary school renovations proposal. Wheeler…

February 28, 2017

In “New Hampshire”

Nashua Representative Patricia Klee calls victim of PRL abuse a ‘liar’

Yesterday, Political Buzz received several emails from readers that came from one of their New Hampshire State Representatives, Democrat Patricia Klee. The freshman representative made some outrageous statements about a story that was presented as testimony during the hearings for Senate Bill 12, a bill that would end the admitted…

February 7, 2017

In “2nd Amendment”

Comments

comments

A Complete Guide to Grid | CSS-Tricks

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).

This article was ported over from Chris House’s guide, by Chris himself, who is keeping both up-to-date.

CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

There are two primary things that inspired me to create this guide. The first is Rachel Andrew’s awesome book Get Ready for CSS Grid Layout. It’s a thorough, clear introduction to Grid and is the basis of this entire article. I highly encourage you to buy it and read it. My other big inspiration is Chris Coyier’s A Complete Guide to Flexbox, which has been my go-to resource for everything flexbox. It’s helped a ton of people, evident by the fact that it’s the top result when you Google “flexbox.” You’ll notice many similarities between his post and mine, because why not steal from the best?

My intention with this guide is to present the Grid concepts as they exist in the very latest version of the specification. So I won’t be covering the out of date IE syntax, and I’ll do my best to update this guide regularly as the spec matures.

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row. Similarly to flexbox, the source order of the grid items doesn’t matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.

Firefox 52+ supports CSS Grid out of the box. Internet Explorer 10 and 11 on the other hand support it, but it’s an old implementation with an outdated syntax. In order to experiment with Grid today in Chrome, navigate to chrome://flags and enable “experimental web platform features”. That method also works in Opera (opera://flags).

#Desktop

Google Chrome Mozilla Firefox Internet Explorer Opera Apple Safari
25 19 9 28 6

#Mobile / Tablet

iOS Safari Android Opera Mobile Android Chrome Android Firefox
6.0 4.2 37 56 51

Aside from Microsoft, browser manufacturers appear to be holding off on letting Grid loose in the wild until the spec is fully cooked. This is a good thing, as it means we won’t have to worry about learning multiple syntaxes.

It’s only a matter of time before you can use Grid in production. But the time to learn it is now.

Before diving into the concepts of Grid it’s important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it’s easy to confuse them with one another if you don’t first memorize their meanings defined by the Grid specification. But don’t worry, there aren’t many of them.

#Grid Container

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

#Grid Item

The children (e.g. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

<div class="container">
  <div class="item"></div> 
  <div class="item">
  	<p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

#Grid Line

The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

#Grid Track

The space between two adjacent grid lines. You can think of them like the columns or rows of the grid. Here’s the grid track between the second and third row grid lines.

Grid track

#Grid Cell

The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid cell

#Grid Area

The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Grid area

Properties for the Parent
(Grid Container)

#display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

  • grid – generates a block-level grid
  • inline-grid – generates an inline-level grid
  • subgrid – if your grid container is itself a grid item (i.e. nested grids), you can use this property to indicate that you want the sizes of its rows/columns to be taken from its parent rather than specifying its own.
.container {
  display: grid | inline-grid | subgrid;
}

Note: column, float, clear, and vertical-align have no effect on a grid container.

#grid-template-columns
grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

  • <track-size> – can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
  • <line-name> – an arbitrary name of your choosing
.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

Examples:

When you leave an empty space between the track values, the grid lines are automatically assigned numerical names:

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Grid with auto named lines

But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Grid with user named lines

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

Which is equivalent to this:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn’t include the 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

#grid-template-areas

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

Values:

  • <grid-area-name> – the name of a grid area specified with grid-area
  • . – a period signifies an empty grid cell
  • none – no grid areas are defined
.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

Example:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

That’ll create a grid that’s four columns wide by three rows tall. The entire top row will be comprised of the header area. The middle row will be comprised of two main areas, one empty cell, and one sidebar area. The last row is all footer.

Example of grid-template-areas

Each row in your declaration needs to have the same number of cells.

You can use any number of adjacent periods to declare a single empty cell. As long as the periods have no spaces between them they represent a single cell.

Notice that you’re not naming lines with this syntax, just areas. When you use this syntax the lines on either end of the areas are actually getting named automatically. If the name of your grid area is foo, the name of the area’s starting row line and starting column line will be foo-start, and the name of its last row line and last column line will be foo-end. This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.

#grid-template

A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Values:

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

It also accepts a more complex but quite handy syntax for specifying all three. Here’s an example:

.container {
  grid-template:
    [row1-start] 25px "header header header" [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

That’s equivalent to this:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

Since grid-template doesn’t reset the implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, it’s recommended to use the grid property instead of grid-template.

#grid-column-gap
grid-row-gap

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Values:

  • <line-size> – a length value
.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

Example:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Example of grid-column-gap and grid-row-gap

The gutters are only created between the columns/rows, not on the outer edges.

#grid-gap

A shorthand for grid-row-gap and grid-column-gap

Values:

  • <grid-row-gap> <grid-column-gap> – length values
.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

Example:

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

If no grid-row-gap is specified, it’s set to the same value as grid-column-gap

#justify-items

Aligns the content inside a grid item along the row axis (as opposed to align-items which aligns along the column axis). This value applies to all grid items inside the container.

Values:

  • start – aligns the content to the left end of the grid area
  • end – aligns the content to the right end of the grid area
  • center – aligns the content in the center of the grid area
  • stretch – fills the whole width of the grid area (this is the default)
.container {
  justify-items: start | end | center | stretch;
}

Examples:

.container {
  justify-items: start;
}

Example of justify-items set to start

.container{
  justify-items: end;
}

Example of justify-items set to end

.container{
  justify-items: center;
}

Example of justify-items set to center

.container{
  justify-items: stretch;
}

Example of justify-items set to stretch

This behavior can also be set on individual grid items via the justify-self property.

#align-items

Aligns the content inside a grid item along the column axis (as opposed to justify-items which aligns along the row axis). This value applies to all grid items inside the container.

Values:

  • start – aligns the content to the top of the grid area
  • end – aligns the content to the bottom of the grid area
  • center – aligns the content in the center of the grid area
  • stretch – fills the whole height of the grid area (this is the default)
.container {
  align-items: start | end | center | stretch;
}

Examples:

.container {
  align-items: start;
}

Example of align-items set to start

.container {
  align-items: end;
}

Example of align-items set to end

.container {
  align-items: center;
}

Example of align-items set to center

.container {
  align-items: stretch;
}

Example of align-items set to stretch

This behavior can also be set on individual grid items via the align-self property.

#justify-content

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the row axis (as opposed to align-content which aligns the grid along the column axis).

Values:

  • start – aligns the grid to the left end of the grid container
  • end – aligns the grid to the right end of the grid container
  • center – aligns the grid in the center of the grid container
  • stretch – resizes the grid items to allow the grid to fill the full width of the grid container
  • space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
  • space-between – places an even amount of space between each grid item, with no space at the far ends
  • space-evenly – places an even amount of space between each grid item, including the far ends
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

Examples:

.container {
  justify-content: start;
}

Example of justify-content set to start

.container {
  justify-content: end;	
}

Example of justify-content set to end

.container {
  justify-content: center;	
}

Example of justify-content set to center

.container {
  justify-content: stretch;	
}

Example of justify-content set to stretch

.container {
  justify-content: space-around;	
}

Example of justify-content set to space-around

.container {
  justify-content: space-between;	
}

Example of justify-content set to space-between

.container {
  justify-content: space-evenly;	
}

Example of justify-content set to space-evenly

#align-content

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the column axis (as opposed to justify-content which aligns the grid along the row axis).

Values:

  • start – aligns the grid to the top of the grid container
  • end – aligns the grid to the bottom of the grid container
  • center – aligns the grid in the center of the grid container
  • stretch – resizes the grid items to allow the grid to fill the full height of the grid container
  • space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
  • space-between – places an even amount of space between each grid item, with no space at the far ends
  • space-evenly – places an even amount of space between each grid item, including the far ends
.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

Examples:

.container {
  align-content: start;	
}

Example of align-content set to start

.container {
  align-content: end;	
}

Example of align-content set to end

.container {
  align-content: center;	
}

Example of align-content set to center

.container {
  align-content: stretch;	
}

Example of align-content set to stretch

.container {
  align-content: space-around;	
}

Example of align-content set to space-around

.container {
  align-content: space-between;	
}

Example of align-content set to space-between

.container {
  align-content: space-evenly;	
}

Example of align-content set to space-evenly

#grid-auto-columns
grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). Implicit grid tracks get created when you explicitly position rows or columns (via grid-template-rows/grid-template-columns) that are out of range of the defined grid.

Values:

  • <track-size> – can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

To illustrate how implicit grid tracks get created, think about this:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

Example of 2 x 2 grid

This creates a 2 x 2 grid.

But now imagine you use grid-column and grid-row to position your grid items like this:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Example of implicit tracks

We told .item-b to start on column line 5 and end at column line 6, but we never defined a column line 5 or 6. Because we referenced lines that don’t exist, implicit tracks with widths of 0 are created to fill in the gaps. We can use grid-auto-columns and grid-auto-rows to specify the widths of these implicit tracks:

.container {
  grid-auto-columns: 60px;
}

Example of implicit tracks

#grid-auto-flow

If you have grid items that you don’t explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.

Values:

  • row – tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary
  • column – tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary
  • dense – tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later
.container {
  grid-auto-flow: row | column | row dense | column dense
}

Note that dense might cause your items to appear out of order.

Examples:

Consider this HTML:

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

You define a grid with five columns and two rows, and set grid-auto-flow to row (which is also the default):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

When placing the items on the grid, you only specify spots for two of them:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Because we set grid-auto-flow to row, our grid will look like this. Notice how the three items we didn’t place (item-b, item-c and item-d) flow across the available rows:

Example of grid-auto-flow set to row

If we instead set grid-auto-flow to column, item-b, item-c and item-d flow down the columns:

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

Example of grid-auto-flow set to column

#grid

A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. It also sets grid-column-gap and grid-row-gap to their initial values, even though they can’t be explicitly set by this property.

Values:

.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

Examples:

The following two code blocks are equivalent:

.container {
  grid: 200px auto / 1fr auto 1fr;
}
.container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

And the following two code blocks are equivalent:

.container {
  grid: column 1fr / auto;
}
.container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

It also accepts a more complex but quite handy syntax for setting everything at once. You specify grid-template-areas, grid-auto-rows and grid-auto-columns, and all the other sub-properties are set to their initial values. What you’re doing is specifying the line names and track sizes inline with their respective grid areas. This is easiest to describe with an example:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

That’s equivalent to this:

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

Properties for the Children
(Grid Items)

#grid-column-start
grid-column-end
grid-row-start
grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

Values:

  • <line> – can be a number to refer to a numbered grid line, or a name to refer to a named grid line
  • span <number> – the item will span across the provided number of grid tracks
  • span <name> – the item will span across until it hits the next line with the provided name
  • auto – indicates auto-placement, an automatic span, or a default span of one
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

Examples:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

Example of grid-row/column-start/end

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

Example of grid-row/column-start/end

If no grid-column-end/grid-row-end is declared, the item will span 1 track by default.

Items can overlap each other. You can use z-index to control their stacking order.

#grid-column
grid-row

Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

Values:

  • <start-line> / <end-line> – each one accepts all the same values as the longhand version, including span
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Example:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

Example of grid-column/grid-row

If no end line value is declared, the item will span 1 track by default.

#grid-area

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Values:

  • <name> – a name of your choosing
  • <row-start> / <column-start> / <row-end> / <column-end> – can be numbers or named lines
.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Examples:

As a way to assign a name to the item:

.item-d {
  grid-area: header
}

As the short-shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

Example of grid-area

#justify-self

Aligns the content inside a grid item along the row axis (as opposed to align-self which aligns along the row axis). This value applies to the content inside a single grid item.

Values:

  • start – aligns the content to the left end of the grid area
  • end – aligns the content to the right end of the grid area
  • center – aligns the content in the center of the grid area
  • stretch – fills the whole width of the grid area (this is the default)
.item {
  justify-self: start | end | center | stretch;
}

Examples:

.item-a {
  justify-self: start;
}

Example of justify-self set to start

.item-a {
  justify-self: end;
}

Example of justify-self set to end

.item-a {
  justify-self: center;
}

Example of justify-self set to center

.item-a {
  justify-self: stretch;
}

Example of justify-self set to stretch

To set alignment for all the items in a grid, this behavior can also be set on the grid container via the justify-items property.

#align-self

Aligns the content inside a grid item along the column axis (as opposed to justify-self which aligns along the row axis). This value applies to the content inside a single grid item.

Values:

  • start – aligns the content to the top of the grid area
  • end – aligns the content to the bottom of the grid area
  • center – aligns the content in the center of the grid area
  • stretch – fills the whole height of the grid area (this is the default)
.item {
  align-self: start | end | center | stretch;
}

Examples:

.item-a {
  align-self: start;
}

Example of align-self set to start

.item-a {
  align-self: end;
}

Example of align-self set to end

.item-a {
  align-self: center;
}

Example of align-self set to center

.item-a {
  align-self: stretch;
}

Example of align-self set to stretch

To align all the items in a grid, this behavior can also be set on the grid container via the align-items property.

This article was ported over from Chris House’s guide, by Chris himself, who is keeping both up-to-date.

Fructose-free Chocolate Milk Recovery Drink

yield: 1 gallon (2 1/4c dry mix)

ingredients:

1 1/3 c dextrose

2/3 c dark cocoa (Dutch process preferred, e.g. Special Dark or better)

2 T stevia/erythritol blend (to make blend: 1/2 t pure stevia extract per cup erythritol)

2 t xanthan gum

2000 IU Vitamin E succinate

1 gallon skim milk

2/3 c hot water

method: mix powders in blender to break up clumps. Add hot water. Mix to form paste. Add milk to target full blender (n.b. expands by about 1.5x with air) and mix until fully blended. Pour contents of blender back into gallon of milk and shake.

usage: 1oz drink per 7.5lbs of ideal body weight as soon as possible after lifting.