Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Implement and document new grid helper

Abierto
#161 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
20/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Tranquilo
Stack tecnológico
css
Área
frontend

Línea de trabajo

No se nombran archivos, pruebas ni puntos de entrada. Empieza revisando las secciones existentes de Flexbox y Grid y la estructura de la navbar; después, compara las sintaxis propuestas para los helpers de grid y su compatibilidad con Firefox. Se considera terminado cuando haya una implementación acordada, la documentación y la navegación estén actualizadas, y las limitaciones de navegador indicadas se hayan resuelto o documentado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

documentation enhancement

Questions

  • Should we still have separate "Flexbox" and "Grid" sections in the navbar? If not, where do we move the content to?

Possible impls

Blocked: @scope in Firefox. Update: no longer blocked
Blocked: attr() for <custom-ident> in Firefox (I think? mdn isn't clear on this): Update: still blocked: https://caniuse.com/mdn-css_types_attr_type_function_ident

Possible new syntax from @dz4k

<style>
.grid {
  [id] {
    grid-area: attr(id);
  }
}
</style>

<div class="grid" style="
  grid-template: if(
    media(width < 768px), 'title' 'nav' 'content',
    'title title' 'nav content' / auto 1fr
  )
">
  <h1 id=title>...</h1>
  <nav id=nav>...</nav>
  <div id=content>...</nav>

More suggestions from deniz:

.layout-grid {
  display: grid;
  gap: var(--gap);
  margin-block: var(--gap);

  @media (max-width: 768px) {
    display: flex;
    flex-flow: column nowrap;
  }
}

Usage:

<article class="layout-grid" style="grid: 1fr / 1fr 2fr">
<!-- or -->

<article class="layout-grid" style="
  grid-template:
  'image title' auto
  'image desc' 1fr
  /auto  1fr
">
Lenguaje dominante
CSS
Estrellas
798
Forks
29
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de bigskysoftware/missing

Todos los issues de bigskysoftware/missing

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.