Responsive and CSS Design Questions

font-size: clamp(1rem, 1rem + 1.2vw, 1.5rem)

.grid {
  display: grid;
  gap: var(--grid-gap, 16px);
  /* base: columns controlled by --cols */
  --cols: 4;
  --col-width: minmax(0, 1fr);
  grid-template-columns: repeat(var(--cols), var(--col-width));
  container-type: inline-size;
}

/* column span utility */
[class*="col-"] {
  /* JS/Preprocessor will set inline style --span for dynamic spans, fallback to class */
}
.col-1 { --span: 1; grid-column: span 1; }
.col-2 { --span: 2; grid-column: span 2; }

/* named areas example */
.grid--areas-simple {
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
}

/* container-query: adjust --cols based on container size */
@container (min-width: 900px) {
  .grid { --cols: 12; }
}
@container (min-width: 600px) and (max-width:899px) {
  .grid { --cols: 8; }
}
@container (max-width:599px) {
  .grid { --cols: 4; }
}

// Grid.jsx (simplified)
function Grid({ children, gap='16px', cols }) {
  const style = { '--grid-gap': gap, ...(cols && {'--cols': cols}) };
  return <div className="grid" style={style}>{children}</div>;
}
function Cell({ span=1, area, children }) {
  const style = { gridColumn: `span ${span}`, gridArea: area };
  return <div className={`col-${span}`} style={style}>{children}</div>;
}

<article class="profile-card">
  <img class="profile-photo" src="avatar.jpg" alt="Photo of Jane Doe, Senior Designer" loading="lazy" />
  <div class="profile-content">
    <header>
      <h2>Jane Doe</h2>
      <p class="role">Senior Product Designer</p>
    </header>
    <p>Brief bio or description goes here. Contact or action buttons can follow.</p>
  </div>
</article>

.profile-card {
  display: grid;
  gap: 1rem;
  align-items: start;
  grid-template-columns: 1fr; /* mobile: stacked */
}

.profile-photo {
  width: 100%;
  height: auto;            /* preserve aspect ratio */
  display: block;
  object-fit: cover;       /* good when container crops */
  border-radius: 6px;
}

/* Desktop layout */
@media (min-width: 768px) {
  .profile-card {
    grid-template-columns: 200px 1fr; /* fixed photo width, content fills */
    align-items: center;
  }
  .profile-photo {
    width: 100%;             /* fills the 200px column */
    height: auto;
  }
}

/* responsive column masonry with focusable items */
.masonry {
  column-gap: 1rem;
  column-width: 280px; /* creates responsive column count */
}
.masonry-item {
  display: inline-block; /* keep item as independent block inside columns */
  width: 100%;
  margin: 0 0 1rem;
  break-inside: avoid;
  outline: none;
}
@supports (display: grid) and (grid-template-rows: masonry) {
  /* use native masonry when available (e.g., Firefox experimental) */
  .masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); grid-auto-rows: masonry; gap: 1rem; }
  .masonry-item { width: auto; display: block; }
}

<ul class="masonry" role="list">
  <li class="masonry-item"><a href="#" class="card">…</a></li>
  ...
</ul>

<section class="two-col" aria-label="Two column layout">
  <main>
    <h2>Article</h2>
    <p>Some paragraph text that will wrap inside the column.</p>
    <img src="image.jpg" alt="Descriptive alt text">
  </main>
  <aside>
    <h3>Sidebar</h3>
    <p>Sidebar content that also wraps appropriately.</p>
    <img src="side.jpg" alt="Decorative or descriptive text">
  </aside>
</section>

.two-col {
  display: flex;
  flex-direction: column; /* default: stacked */
  gap: 16px;
  align-items: stretch;
}

.two-col > * {
  box-sizing: border-box;
  padding: 8px;
}

/* Images responsive */
.two-col img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Two-column layout at >=600px */
@media (min-width: 600px) {
  .two-col {
    flex-direction: row;
  }
  .two-col > * {
    flex: 0 0 50%; /* each column takes 50% */
  }
}