Layout 2: DTLA The Park
I first visited the Park at a CSS.la meetup on CSS Animations. While walking up to the workshop I took this photo.
The only true office campus in Downtown, The Park DTLA indoor and outdoor creative office sits on Figueroa between 2nd and 3rd Streets, only one-half mile from LA Live and South Park. The Park is a pet friendly campus, solar-powered and offers the top fiber tech for its tenants and visitors.
This grid uses grid-template-areas but is otherwise very simple.
<style type="text/css">
body {
font-family: 'Noto Sans', sans-serif;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 2fr;
grid-template-areas:
". a img img"
". b img img";
grid-gap: 1em;
margin: 0;
min-height: 100vh;
}
.park {
grid-area: img;
}
img {
width: 100%;
height: 100vh;
object-fit: cover;
}
article {
grid-area: b;
align-self: end;
}
</style>