Create an account or log in

Keep learning for free! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
5 Hrs
25 Min
3 Seg
Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

La lógica detrás del Grid system

3/17
Resources

What is the grid system and how is it used?

The grid system, known as Grid System, is an essential tool in web design and layout. Its foundation is the use of columns to distribute and organize the elements on a page, something that is not only applied in the digital environment, but also comes from print design, such as newspapers and magazines.

How is the grid system implemented on the web?

The web grid system is typically based on a 12-column layout. This structure allows to effectively divide the page into manageable sections for different elements.

  • Container tags in HTML5: HTML elements are placed inside these columns, allowing the web designer to organize textual content, images and other components.

  • Example of column layout: Imagine a nav tag that uses 3 columns within a grid, a div container that occupies 9 columns and a header that spans the full 12 columns.

Why is it important in web design?

Using a grid system not only facilitates the alignment and organization of the interface, but also allows:

  • Improved readability: by organizing the content in columns, we ensure that the information is easily digestible by the user.

  • Responsive design: Allows to automatically adjust the design according to the device. For example, a navigation bar that occupies 3 columns on a desktop could be extended to 6 or 12 on mobile devices to improve accessibility and readability.

Advantages of the grid system in responsive design

How does it facilitate the creation of responsive designs?

Implementing a grid system is crucial in responsive design as it provides flexibility to adapt the design to different screen sizes, from desktops to cell phones.

  • Easy repositioning: If an element is moved or hidden on smaller screens, the grid allows you to adjust the layout without complications.

  • Multiple adaptation: The same column structure can be modified to favor the readable and aesthetically pleasing layout of the content on any device.

Practical example of responsive layout

Let's consider the nav tag again. On a small device, it can be changed to use more columns, ensuring that links are accessible and the layout is functional.

<!-- HTML code for a responsive navbar --><nav class="navbar"> <ul class="grid"> <li class="item">Home</li> <li class="item">AboutUs</li> <li class="item">Contact Us</li> </ul></nav> .

With CSS, we can adjust the width of these columns:

.navbar { display: grid; grid-template-columns: repeat(12, 1fr);}
.item { grid-column: span 3; /* On desktop */} }
 @media (max-width: 768px) { .item { grid-column: span 6; /* On mobile devices */ } }}

This way the navigation bar automatically adapts to the device environment, ensuring a uniform and satisfying user experience.

Conclusion: The path to effective design

Understanding and properly applying the grid system is essential for any web designer looking to create organized, aesthetically pleasing and easily manageable interfaces. Responsive design is not only a trend, but a necessity in a world where mobile devices dominate web access.

Keep exploring and experimenting with these tools. Remember that continuous learning is key to perfecting your design skills and delivering the best experiences to end users. Don't stop!

Contributions 18

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

Un Grid System trae 12 columnas y es como divides la posición de las etiquetas contenedoras entre cuantas columnas tenemos que utilizar para maquetar un diseño y luego poder reposicionar todos los elementos al momento de que estemos trabajando de forma responsive.

Me gusta mucho porque es como CSS Grid

Entonces sigue el mismo patrón que CSS Grid?

NC - slide - Documentación y características de materialize.

Es el concepto de columnas que utilizamos al generar diseño.
Un Grid System contiene 12 columnas. Y nos sirve para posicionar las Etiquetas Contenedoras para maquetar y Reposicionar todos los elementos cuando trabajamos Responsive.

El Grid system se divide en 12 columnas, en el grid se pueden crear areas o o etiquetas contenedoras como el Header, el Nav, el Content o el Footer.

el sistema de grillas tiene 12 columnas en total, la disposición de estas depende del diseño y ayuda mucho en el responsive design.

<h4>La lógica detrás del Grid system</h4>

Es el sistema de 12 columnas. Sabremos cuál es el espacio que usarán las etiquetas contenedoras. Esto nos ayuda mucho en el diseño responsive.

Materialize CSS utiliza el formato de cuadrícula de 12 columnas de Bootstrap para que pueda crear rápidamente diseños de página receptivos. Comenzará aún más rápido con los conocimientos básicos de un proyecto Bootstrap.

Más características de Materialize CSS:

  • Menús móviles
  • Compatible con Sass

By: https://www.mockplus.com/blog/post/css-framework

Material tiene mejor estilos que Boostrap

la clase .row no permite generar un contenedor de filas chicos téngalo presente

He visto este concepto en varios Frameworks así mismo veo como algunas personas discuten sobre si es mejor usarlo natural con CSS grid o con estas ayudas.
.
Pienso que es fundamental conocer la naturaleza de donde proviene que es CSS grid y luego si deseas puedes tomar el camino que quieras ya sabiendo como es que realmente funciona todo.

El sistema de grilla es una de las principales razones por las cuales se utiliza un framework, ya que esa funcionalidad permite ahorrar mucho tiempo al momento de maquetar/diseñar/plasmar

Esto vendría a ser grid-areas en CSS Grid, y también es muy parecido a Bootstrap, me gusta!

Muchas gracias Diego.

Clase interesante!

Me gusta porque seguire practicando Grid Css 😀

n