<div id="" class=" dg homepage-grid mw900 mx-auto">
<div id="" class="Deliver bg--aqua-1100 c--neutral-0 flex items-center pa400 py800">
<h3 class="c--neutral-0 " style="">
Deliver and measure valuable content
</h3>
</div>
<div id="" class="Image ">
<div id="" class=" relative h-100p w-100p">
<amp-img id="" class="db h-100p w-100p fit-cover" alt="" src="http://fillmurray.com/500/500" height="200" width="200" layout="fill">
</amp-img>
</div>
</div>
<a class="Nurture bg--green-500 c--neutral-0 flex items-center pa400 lift hover-shadow400 relative z3" href="#">
<h3 class="c--neutral-0 " style="">
Nurture relationships
</h3>
</a>
<a class="Foster bg--purple-700 c--neutral-0 flex items-center pa400 lift hover-shadow400 relative z3" href="#">
<h3 class="c--neutral-0 " style="">
Foster advocacy
</h3>
</a>
<div id="" class="LargeImage ">
<div id="" class=" relative h-100p w-100p">
<amp-img id="" class="db h-100p w-100p fit-cover" alt="" src="http://fillmurray.com/600/600" height="200" width="200" layout="fill">
</amp-img>
</div>
</div>
<div id="" class="AltImage ">
<div id="" class=" relative h-100p w-100p">
<amp-img id="" class="db h-100p w-100p fit-cover" alt="" src="http://fillmurray.com/420/420" height="200" width="200" layout="fill">
</amp-img>
</div>
</div>
<div id="" class="Footer bg--aqua-1100 c--neutral-0 flex items-center pa400">
<h3 class="c--neutral-0 " style="">
Mine social data and activate social listening
</h3>
</div>
<style>
.homepage-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: "Deliver Deliver" "Image Nurture" ". Foster" ". ." ". ."
}
.homepage-grid .Deliver {
grid-area: Deliver
}
.homepage-grid .Image {
grid-area: Image
}
.homepage-grid .Nurture {
grid-area: Nurture
}
.homepage-grid .Foster {
grid-area: Foster
}
.homepage-grid .LargeImage {
grid-area: 3/1/5/1
}
.homepage-grid .AltImage {
grid-area: 4/2/4/2
}
.homepage-grid .Footer {
grid-area: 5/1/5/3
}
@media screen and (min-width:60rem) {
.homepage-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "Deliver Deliver LargeImage Foster" "Image Nurture LargeImage ." ". AltImage Footer Footer"
}
.homepage-grid .LargeImage {
grid-area: LargeImage
}
.homepage-grid .AltImage {
grid-area: AltImage
}
.homepage-grid .Footer {
grid-area: Footer
}
}
</style>
</div>
<div id="{{id}}" class="{{class}} {{modifier}}">
{{> @children}}
</div>
{
"id": null,
"class": null,
"modifier": "dg homepage-grid mw900 mx-auto",
"children": [
{
"component": "div",
"context": {
"class": "Deliver",
"modifier": "bg--aqua-1100 c--neutral-0 flex items-center pa400 py800",
"children": [
{
"component": "heading",
"context": {
"modifier": "c--neutral-0",
"level": 3,
"text": "Deliver and measure valuable content"
}
}
]
}
},
{
"component": "div",
"context": {
"class": "Image",
"children": [
{
"component": "div",
"context": {
"modifier": "relative h-100p w-100p",
"children": [
{
"component": "ampimage",
"context": {
"modifier": "db h-100p w-100p fit-cover",
"src": "http://fillmurray.com/500/500",
"amplayout": "fill",
"height": "200",
"width": "200"
}
}
]
}
}
]
}
},
{
"component": "link",
"context": {
"modifier": "Nurture bg--green-500 c--neutral-0 flex items-center pa400 lift hover-shadow400 relative z3",
"href": "#",
"children": [
{
"component": "heading",
"context": {
"modifier": "c--neutral-0",
"level": 3,
"text": "Nurture relationships"
}
}
]
}
},
{
"component": "link",
"context": {
"modifier": "Foster bg--purple-700 c--neutral-0 flex items-center pa400 lift hover-shadow400 relative z3",
"href": "#",
"children": [
{
"component": "heading",
"context": {
"modifier": "c--neutral-0",
"level": 3,
"text": "Foster advocacy"
}
}
]
}
},
{
"component": "div",
"context": {
"class": "LargeImage",
"children": [
{
"component": "div",
"context": {
"modifier": "relative h-100p w-100p",
"children": [
{
"component": "ampimage",
"context": {
"modifier": "db h-100p w-100p fit-cover",
"src": "http://fillmurray.com/600/600",
"amplayout": "fill",
"height": "200",
"width": "200"
}
}
]
}
}
]
}
},
{
"component": "div",
"context": {
"class": "AltImage",
"children": [
{
"component": "div",
"context": {
"modifier": "relative h-100p w-100p",
"children": [
{
"component": "ampimage",
"context": {
"modifier": "db h-100p w-100p fit-cover",
"src": "http://fillmurray.com/420/420",
"amplayout": "fill",
"height": "200",
"width": "200"
}
}
]
}
}
]
}
},
{
"component": "div",
"context": {
"class": "Footer",
"modifier": "bg--aqua-1100 c--neutral-0 flex items-center pa400",
"children": [
{
"component": "heading",
"context": {
"modifier": "c--neutral-0",
"level": 3,
"text": "Mine social data and activate social listening"
}
}
]
}
},
{
"component": "html",
"context": {
"content": "<style>.homepage-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;grid-template-areas:\"Deliver Deliver\" \"Image Nurture\" \". Foster\" \". .\" \". .\"}.homepage-grid .Deliver{grid-area:Deliver}.homepage-grid .Image{grid-area:Image}.homepage-grid .Nurture{grid-area:Nurture}.homepage-grid .Foster{grid-area:Foster}.homepage-grid .LargeImage{grid-area:3/1/5/1}.homepage-grid .AltImage{grid-area:4/2/4/2}.homepage-grid .Footer{grid-area:5/1/5/3}@media screen and (min-width:60rem){.homepage-grid{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:\"Deliver Deliver LargeImage Foster\" \"Image Nurture LargeImage .\" \". AltImage Footer Footer\"}.homepage-grid .LargeImage{grid-area:LargeImage}.homepage-grid .AltImage{grid-area:AltImage}.homepage-grid .Footer{grid-area:Footer}}</style>"
}
}
]
}
@import "./GridBase";
.row {
&._left {
justify-content: flex-start;
}
&._right {
justify-content: flex-end;
}
&._spread {
justify-content: space-between;
}
&._bordered {
padding-top: Space(500);
border-top: 1px solid get-color(neutral, 600);
}
&._bottomitems {
align-items: flex-end;
}
&._wrap {
flex-wrap: wrap;
}
}
._nogutter {
padding: 0;
}
._shrink {
padding-right: $grid-gutter / 2;
padding-left: $grid-gutter / 2;
flex: 0 1 auto;
}
._grow {
padding-right: $grid-gutter / 2;
padding-left: $grid-gutter / 2;
flex: 1 0 auto;
}
@media #{$mobile-media} {
._reverse {
z-index: 1;
order: 2;
}
._reverse + * {
z-index: 0;
margin-top: 0;
margin-bottom: Space(500);
order: 1;
}
}
@media #{$desktop-media} {
._pad-bottom {
padding-bottom: Space(700);
}
.Row--overlapLeft {
> .col:first-child {
@include ZIndex("Card");
position: relative;
margin-right: -(Space(700));
align-self: flex-start;
}
> .col:last-child {
padding: Space(600) Space(400) Space(600) Space(800);
margin-top: Space(700);
align-self: flex-end;
border: 2px solid get-color(neutral, 300);
}
}
.Row--overlapRight {
> .col:first-child {
padding: Space(600) Space(800) Space(600) Space(600);
margin-top: Space(700);
align-self: flex-end;
border: 2px solid get-color(neutral, 300);
}
> .col:last-child {
@include ZIndex("Card");
position: relative;
margin-left: -(Space(700));
align-self: flex-start;
}
}
}
@media screen and (min-width: 900px) {
._pad-right {
padding-right: 9.375%;
}
._pad-left {
padding-left: 9.375%;
}
}
.row {
@include grid-row;
&._centeritems {
align-items: center;
}
}
@for $i from 1 through $grid-columns {
._span-#{$i} {
@include grid-col($i);
}
}
.col {
> .row {
@include grid-row-nested;
}
}
@media #{$mobile-media} {
.col + .col {
margin-top: Space(500);
}
}
Grid is a component that is simply a div that contains the display: grid utility and allows for children.
grid-area and grid-template-areas.