Tachyons Layout Basic Grid es un diseño con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posicionamiento. Podemos crear una variedad de cuadrículas combinando anchos, flotación y relleno.
Sintaxis:
<element-name class="class-name"></element-name>
Tachyons Layout Basic Grid Classes: No existe una clase para Grids, pero como mencionamos, podemos crear una cuadrícula usando padding, float y widths.
- fl w-100 pa2: Esta clase se utiliza para proporcionar el 100% del ancho.
- fl w-90 pa2: Esta clase se utiliza para proporcionar el 90% del ancho.
- fl w-80 pa2: Esta clase se utiliza para proporcionar el 80% del ancho.
- fl w-70 pa2: Esta clase se utiliza para proporcionar el 70% del ancho.
- fl w-60 pa2: Esta clase se utiliza para proporcionar el 60% del ancho.
- fl w-50 pa2: Esta clase se utiliza para aportar el 50% del ancho.
- fl w-40 pa2: Esta clase se utiliza para proporcionar el 40% del ancho.
- fl w-30 pa2: Esta clase se utiliza para aportar el 30% del ancho.
- fl w-20 pa2: Esta clase se utiliza para proporcionar el 20% del ancho.
- fl w-10 pa2: Esta clase se utiliza para proporcionar el 10% del ancho.
Ejemplo 1: en el siguiente ejemplo, tenemos que hacer uso de la clase anterior para demostrar la cuadrícula básica:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons/css/tachyons.min.css"> </head> <body> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3> Tachyons Layout Basic Grid </h3> <div class="mw8 center ph3-ns"> <div class="fl w-100 pa2"> <div class="outline bg-white pv4"> fl w-100 pa2 </div> </div> </div> </center> </body> </html>
Producción:
Cuadrícula básica de diseño de taquiones
Ejemplo 2: en el siguiente ejemplo, tenemos que hacer uso de la clase anterior para demostrar la cuadrícula múltiple:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons/css/tachyons.min.css"> </head> <body> <center> <h2 style="color:green;"> GeeksforGeeks</h2> <h3> Tachyons Layout Basic Grid </h3> <div class="mw9 center ph3-ns"> <div class="cf ph2-ns"> <div class="fl w-100 w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-100 w-25-ns pa2 </div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-third w-25-ns pa2 </div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-third w-25-ns pa2 </div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"> fl w-third w-25-ns pa2 </div> </div> </div> </div> </center> </body> </html>
Producción:
Cuadrícula básica de diseño de taquiones
Referencia: https://tachyons.io/docs/layout/grid/