Componentes / Container Grid

Container Grid

estable

Contenedor de layout con 9 variantes de rejilla (4-4-4, 6-6, 3-3-3-3, landscape, etc.) para agrupar tarjetas.

02.04.25

Ejemplo de documento

Descripción breve del documento.

PDF

5.53 MB

02.04.25

Ejemplo de documento

Descripción breve del documento.

PDF

5.53 MB

02.04.25

Ejemplo de documento

Descripción breve del documento.

PDF

5.53 MB

Controls

themevariantbg

HTML

<section>
  <div class="grid-container__variant1">
    <div class="grid-container-item">
      <article class="widget-item">
        <figure class="widget-item__figure">
          <img src="https://fastly.picsum.photos/id/120/600/400.jpg" alt="Ejemplo de documento">
        </figure>
        <div class="widget-item__content">
          <span class="widget-item__category">02.04.25</span>
          <h3 class="widget-item__heading">Ejemplo de documento</h3>
          
          <p class="widget-item__paragraph">Descripción breve del documento.</p>
          <div class="widget-item__download-button">
            <p class="widget-item__type">PDF</p>
            <div class="widget-item__download-size">
              <p class="widget-item__size">5.53 MB</p>
              <a href="#" aria-label="Descarga Ejemplo de documento"><span class="widget-item__download-button__icon"></span></a>
            </div>
          </div>
        </div>
      </article>
    </div>
    <div class="grid-container-item">
      <article class="widget-item">
        <figure class="widget-item__figure">
          <img src="https://fastly.picsum.photos/id/121/600/400.jpg" alt="Ejemplo de documento">
        </figure>
        <div class="widget-item__content">
          <span class="widget-item__category">02.04.25</span>
          <h3 class="widget-item__heading">Ejemplo de documento</h3>
          
          <p class="widget-item__paragraph">Descripción breve del documento.</p>
          <div class="widget-item__download-button">
            <p class="widget-item__type">PDF</p>
            <div class="widget-item__download-size">
              <p class="widget-item__size">5.53 MB</p>
              <a href="#" aria-label="Descarga Ejemplo de documento"><span class="widget-item__download-button__icon"></span></a>
            </div>
          </div>
        </div>
      </article>
    </div>
    <div class="grid-container-item">
      <article class="widget-item">
        <figure class="widget-item__figure">
          <img src="https://fastly.picsum.photos/id/122/600/400.jpg" alt="Ejemplo de documento">
        </figure>
        <div class="widget-item__content">
          <span class="widget-item__category">02.04.25</span>
          <h3 class="widget-item__heading">Ejemplo de documento</h3>
          
          <p class="widget-item__paragraph">Descripción breve del documento.</p>
          <div class="widget-item__download-button">
            <p class="widget-item__type">PDF</p>
            <div class="widget-item__download-size">
              <p class="widget-item__size">5.53 MB</p>
              <a href="#" aria-label="Descarga Ejemplo de documento"><span class="widget-item__download-button__icon"></span></a>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>