Esta es una colección de plantillas de inicio para diseños y patrones que utilizan CSS Grid. La idea aquí es mostrar lo que la técnica es capaz de hacer y proporcionar un punto de partida que se pueda reutilizar para otros proyectos.
Recuerde que la compatibilidad del navegador con Grid es buena, pero requiere alternativas para los navegadores heredados. Eso significa que copiar y pegar directamente de estos puede no ser adecuado para algunos casos de uso.
Disposición del Santo GrialEl diseño clásico de tres columnas donde dos barras laterales y un contenedor que contiene el texto del cuerpo se intercalan entre un encabezado y un pie de página de ancho completo.
Santo Grial flexibleTodo permanece intacto a medida que cambia el ancho de la ventana gráfica utilizando un contenedor de contenido fluido.
Vea la cuadrícula de CSS de la pluma - Holy Grail 2 de Geoff Graham (@geoffgraham) en CodePen.
Santo Grial receptivoLas cosas se apilan una vez que la ventana se estrecha.
Consulte la cuadrícula de CSS de la pluma: diseño del Santo Grial - Responsive de Geoff Graham (@geoffgraham) en CodePen.
2 columnas con encabezado y pie de páginaUn diseño de blog clásico donde una columna es para la publicación y la otra para una barra lateral.
2 columnas flexiblesEl diseño se vuelve blando cuando la ventana se estrecha pero el diseño permanece en su lugar.
Consulte la cuadrícula de CSS del lápiz: encabezado, pie de página con 2 columnas (flexible) de Geoff Graham (@geoffgraham) en CodePen.
2 columnas receptivasLas cosas se apilan en pantallas más pequeñas.
Consulte la cuadrícula de CSS del lápiz: encabezado, pie de página con 2 columnas (receptivo) de Geoff Graham (@geoffgraham) en CodePen.
Distribuido uniformemente, se ajusta según sea necesarioLos elementos fluyen hacia el diseño y terminan cuando ya no hay más.
Vea la cuadrícula de CSS del lápiz distribuida uniformemente, tantas como sea necesario por Geoff Graham (@geoffgraham) en CodePen.
Artículo con BreakoutUn pequeño truco de Tyler Sticka que permite que un elemento salga de la cuadrícula. Rachel Andrew proporciona una explicación detallada sobre cómo las líneas de cuadrícula con nombre permiten que esto funcione.
Consulte Pen CSS Grid: artículo con Breakout de Geoff Graham (@geoffgraham) en CodePen.
Calendario básicoComo era de esperar, CSS Grid funciona bien para una cuadrícula de calendario.
Consulte la cuadrícula de CSS de la pluma: calendario de Geoff Graham (@geoffgraham) en CodePen.
Junta de monopolioUna simple recreación del tablero de juego. Jen Simmons tiene una dulce demostración completa con los estilos de Monpoly.
Consulte Pen CSS Grid: Monopoly Board de Geoff Graham (@geoffgraham) en CodePen.
Nuestros
maestros frontend de Learning Partner
¿Necesita formación en desarrollo front-end?
Frontend Masters es el mejor lugar para conseguirlo. Tienen cursos sobre todas las tecnologías front-end más importantes, desde React hasta CSS, desde Vue hasta D3 y más allá con Node.js y Full Stack.