Interactive demo

Layout decision helper

Choose between Grid, Flexbox, Subgrid, and container queries based on the behavior the component needs.

Expected behavior

Changing either select updates the recommendation without changing the form layout.

Accessibility notes

Native labels, selects, and an aria-live result region keep the interaction keyboard and screen-reader friendly.

CSS used in this demo

.tool {
  display: grid;
  gap: 1.25rem;
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.tool h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
}

form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

select {
  min-height: 2.75rem;
  border: 2px solid #171717;
  border-radius: 6px;
  background: #ffffff;
  padding-inline: 0.75rem;
}

.result {
  display: grid;
  gap: 0.5rem;
  border: 2px solid #171717;
  border-radius: 8px;
  background: #e8f3f3;
  padding: 1.25rem;
}

.result__label {
  color: #0a6a6c;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.result h2 {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1;
}