Designing Intrinsic Layouts by Jen Simmons

<header role="banner">
<img class="logo" src="..." alt="...">
<h1>Site title</h1>
<nav>
<ul>
<li><a href="...">Home</a></li>
<li><a href="...">Episodes</a></li>
<li><a href="...">Guests</a></li>
<li><a href="...">Subscribe</a></li>
<li><a href="...">About</a></li>
</ul>
</nav>
</header>
grid-template-columns: 1fr 1fr 1fr;
header {
grid-template columns: max-content 3fr 1fr;
}
header {
grid-template columns: max-content auto max-content; }
ul {
display: flex;
}
ul {
display: flex;
flex-wrap: wrap;
}
header {
grid-template columns: max-content auto auto; }
header {
grid-template-columns: min-content auto;
grid-template-rows: auto auto
}
.logo {
row-span: 2;
}
/* code for every browser */

@supports (display: grid) {
/* code for modern browsers */
}

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Series of Docker with code: Basics of Docker and common container management commands-part 1

Configuring Load Balancer with ansible

CS 371P Week 3

How Fast Can Google GO Really Go?

PostgreSQL on a GCP Linux VM- Part-I

Training under the guidance of Mr.Vimal Daga- Path to Right Education

CS373 Software Engineering Blog#9

Altoros Releases a Comparative Performance Report: Couchbase Server v6.6.0,

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

Announcing UX London 2022

Introducing Mission

Design Sprints and Remote Work Lifestyle with Jyotsna Gupta

How to Build a Better Product Using Object-Oriented UX: Part Three