Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Display Table Grids se utilizan para crear la tabla con la ayuda de las clases de utilidad de la tabla de visualización. La altura del contenedor será la misma para todas las columnas cuando la longitud del contenido sea diferente. En este artículo, discutiremos las Cuadrículas de tabla de visualización de CSS de Primer.
Primer CSS Display Table Grids Clases:
- d-table: esta clase se utiliza para crear el diseño de la tabla.
- d-table-cell: esta clase se utiliza para crear la celda de la tabla.
Sintaxis:
<div class="d-table col-12">
<div class="col-4 d-table-cell border">
...
</div>
...
</div>
Ejemplo 1: Este ejemplo demuestra el uso de las cuadrículas de tabla de visualización de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Display Table Grids </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Display Table Grids </h3><br /> </div> <div class="d-table col-12"> <div class="col-3 d-table-cell border p-2"> A Computer Science portal for geeks. </div> <div class="col-3 d-table-cell border p-2"> It contains well written, well thought and well explained computer science and programming articles </div> <div class="col-3 d-table-cell border p-2"> Portal for geeks. </div> <div class="col-3 d-table-cell border p-2"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo demuestra el uso de las cuadrículas de tabla de visualización de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Display Table Grids </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Display Table Grids </h3><br /> </div> <div class="d-table col-12"> <div class="col-2 d-table-cell v-align-middle"> <img class="width-full avatar" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> </div> <div class="col-10 d-table-cell v-align-middle pl-4"> <h1 class="text-bold lh-condensed"> GeeksforGeeks </h1> <p class="h3 color-fg-success"> A Computer Science portal for geeks. </p> <span> Website: </span> <a class="color-fg-muted text-small" href="#"> https://www.geeksforgeeks.org/ </a> </div> </div> </body> </html>
Producción:
Ejemplo 3: este ejemplo demuestra el uso de las cuadrículas de tabla de visualización de Primer CSS para llenar el ancho del contenedor cuando el número total de columnas es inferior a 12.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Display Table Grids </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Display Table Grids </h3><br /> </div> <div class="d-table col-12"> <div class="col-5 d-table-cell border color-bg-success"> GeeksforGeeks col-5 </div> <div class="col-2 d-table-cell border color-bg-success"> GeeksforGeeks col-2 </div> <div class="col-3 d-table-cell border color-bg-success"> GeeksforGeeks col-3 </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/grid#display-table-grids
Publicación traducida automáticamente
Artículo escrito por nagargeetika y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA