Foundation CSS XY Grid Tamaño automático

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos la cuadrícula de bloques XY en Foundation CSS.

El tamaño automático de la cuadrícula XY se usa para asignar el ancho restante de la celda automáticamente al proporcionar . clasificador automático .[tamaño]-clase automática.

Foundation CSS XY Grid Clases de tamaño automático :

[tamaño]-auto: esta clase ayuda a tomar automáticamente el ancho restante de la celda después del tamaño dado. Aquí el tamaño puede ser pequeño, mediano o grande.
auto: esta clase ayuda a tomar automáticamente el ancho restante de la celda.

<div class="grid-x">
    <div class=" cell [size]-auto || auto">
        ...
    </div>
</div>

Ejemplo 1: Este ejemplo ilustra el uso de la cuadrícula de tamaño automático con clase automática .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Foundation CSS XY Grid Auto Sizing</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
  
    <style>
        body {
            padding: 100px;
        }
  
        .grid-x {
            background-color: rgb(236, 215, 20);
        }
  
        .customClass1 {
            background-color: rgb(31, 214, 31);
            line-height: 50px;
            color: white;
        }
  
        .customClass2 {
            background-color: rgb(18, 116, 18);
            line-height: 50px;
            color: white;
        }
    </style>
</head>
  
<body>
    <h1 style="text-align: center; color: green">
        GeeksforGeeks
    </h1>
  
    <div class="grid-x grid-margin-x">
        <div class="cell small-4 customClass1">
          covering only 4 cells
        </div>
        <div class="cell customClass2 auto">
          covering remaining part!
        </div>
    </div>
</body>
  
</html>

Producción:

Foundation CSS XY Grid Tamaño automático

Ejemplo 2: Este ejemplo ilustra el uso de la cuadrícula de tamaño automático con [tamaño] – clase automática .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Foundation CSS XY Grid Auto Sizing</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
  
    <style>
        body {
            padding: 100px;
        }
  
        .grid-x {
            background-color: rgb(236, 215, 20);
        }
  
        .customClass1 {
            background-color: rgb(31, 214, 31);
            line-height: 50px;
            color: white;
        }
  
        .customClass2 {
            background-color: rgb(18, 116, 18);
            line-height: 50px;
            color: white;
        }
    </style>
</head>
  
<body>
    <h1 style="text-align: center; color: green">
        GeeksforGeeks
    </h1>
  
    <div class="grid-x grid-margin-x">
        <div class="cell small-4 customClass1">
          covering only 4 cells
        </div>
        <div class="cell customClass2 large-auto">
          covering remaining part!
        </div>
    </div>
</body>
  
</html>

Producción:

Foundation CSS XY Grid Tamaño automático

Referencia: https://get.foundation/sites/docs/xy-grid.html#auto-sizing

Publicación traducida automáticamente

Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta