Layout

The grid is a time-tested tool for creating harmonious compositions. We have devised a simple, flexible and responsive grid system based on the proportions of the AP logo.

Primary grid considerations

AP typically employs two grid options; a standard grid with gutters and a block grid with only columns and row lines. The grid columns should always be equal to the width of the AP logo. For smaller, mobile applications, the width of the AP logo is typically about 1/10th the width of the viewport. On larger, desktop experiences the AP logo is closer to 1/20th the width of the viewport. Generally that range is 36dp to 72dp.

The AP logo is typically set in the left most column, but on larger layouts it may be shifted to the right one or two columns creating increased margin for the header area.


Standard grid

The AP standard grid is a column grid with gutters and is typically used in editorial web sites, digital products and mobile applications.

The Sketch files and CSS grid files include nine common breakpoints with the grid set to auto-fill as the viewport expands.

Ap 600 Gutters Diagram

Block grid

The AP block grid is a modular grid with no gutters and can be helpful in laying out photography focused experiences or sites with fewer details requiring the need for gutters. Row heights should be set to the height of the logo at each break point.

The Sketch files and CSS grid files include nine common breakpoints with the grid set to auto-fill as the viewport expands.

Ap 600 Diagram

CSS grid for AP's standard grid

.ap-grid-set {
  --ap-logo-size: 2.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  grid-gap:.75rem;
  padding:0 1rem;
}

@media (min-width: 22.5rem) /* 360dp */
{
.ap-grid-set {
  --ap-logo-size: 2.375rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  grid-gap:1rem;
  padding:0 1rem;
}
}

@media (min-width: 30rem) /* 480dp */
{
.ap-grid-set {
  --ap-logo-size: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  grid-gap:1rem;
  padding:0 1.5rem;
}
}

@media (min-width: 37.5rem) /* 600dp */
{
.ap-grid-set {
  --ap-logo-size: 2.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  grid-gap:1rem;
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 45rem) /* 720dp */
{
.ap-grid-set {
  --ap-logo-size: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  grid-gap:1rem;
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 60rem) /* 960dp */
{
.ap-grid-set {
  --ap-logo-size: 3.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  grid-gap:1.5rem;
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 64rem) /* 1024dp */
{
.ap-grid-set {
  --ap-logo-size: 3.375rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  grid-gap:1.5rem;
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 80rem) /* 1280dp */
{
.ap-grid-set {
  --ap-logo-size: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));  
  grid-gap:1.5rem;
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 90rem) /* 1440dp */
{
.ap-grid-set {
  --ap-logo-size: 3.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill , minmax(var(--ap-logo-size), 1fr));  
  grid-gap: 1.5rem;
  padding: 0 var(--ap-logo-size);
}
}

CSS grid for AP's block grid

.ap-grid-set {
  --ap-logo-size: 2.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding:0 1rem;
  background: #f5f5f5;
}

@media (min-width: 22.5rem) /* 360dp */
{
.ap-grid-set {
  --ap-logo-size: 2.375rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding:0 1rem;
}
}

@media (min-width: 30rem) /* 480dp */
{
.ap-grid-set {
  --ap-logo-size: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding:0 1.5rem;
}
}

@media (min-width: 37.5rem) /* 600dp */
{
.ap-grid-set {
  --ap-logo-size: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 45rem) /* 720dp */
{
.ap-grid-set {
  --ap-logo-size: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 60rem) /* 960dp */
{
.ap-grid-set {
  --ap-logo-size: 3.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 64rem) /* 1024dp */
{
.ap-grid-set {
  --ap-logo-size: 4.0rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding:0 var(--ap-logo-size);
}
}

@media (min-width: 80rem) /* 1280dp */
{
.ap-grid-set {
  --ap-logo-size: 4.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr)); 
  padding:0 var(--ap-logo-size);

}
}

@media (min-width: 90rem) /* 1440dp */
{
.ap-grid-set {
  --ap-logo-size: 4.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-logo-size), 1fr));
  padding: 0 var(--ap-logo-size);
}
}