Especificar el número de filas y columnas en la cuadrícula

usuario11710837

¿Hay alguna forma de especificar el número de filas y columnas en una cuadrícula?

Mi código me da 3 columnas y 4 filas. Quiero 4 columnas y 3 filas. ¿Hay alguna forma de realizar esto con CSS y HTML? También estoy dispuesto a usar Bootstrap, tratando de editar el código a continuación correctamente.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<h1>Grid Elements</h1>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

showdev

Puede utilizar grid-template-columnspara especificar el número de columnas.
El número de columnas se define por el número de valores en la lista.

A continuación, lo estoy usando repeat()como abreviatura para generar cuatro valores.
Basado en su código existente, auto auto auto autotambién funcionaría.

Consulte también Diseño de cuadrícula CSS .

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<h1>Grid Elements</h1>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Especificar el número de filas y columnas en la cuadrícula

Cambiar el número de columnas y filas en una cuadrícula a medida que aumenta el número de elementos

Cambiar el número de columnas y filas en una cuadrícula a medida que aumenta el número de elementos

Encaja una cuadrícula en un div sea cual sea el número de filas y columnas

crear una cuadrícula con 2 columnas y un número automático de filas en función del número de elementos de la lista

tramos de filas y columnas en el administrador de diseño de cuadrícula de reciclado

Separe / cuadrícula de columnas y filas de columnas internas usando flex, y alinee la imagen en una columna en el centro

Columnas y filas de cuadrícula en ComboBox

¿Agregar columnas y filas a la cuadrícula de datos?

Agregar un número vacío de filas en la vista de cuadrícula según el recuento de filas de la cuadrícula

Cambiar el tamaño de jqGrid según el número de columnas en la cuadrícula

No se puede establecer el ancho o el alto para las columnas y filas de la cuadrícula web

Establecer el recuento de filas de la vista de cuadrícula ASP en un número específico

¿Cómo evitar que el intervalo de filas de la cuadrícula cambie la ubicación de las columnas?

¿Cómo evitar que el intervalo de filas de cuadrícula cambie la ubicación de las columnas?

El editor de filas de la cuadrícula vaadin cambia el orden de las columnas

¿Cómo ejecutar el método de representación predeterminado y el método de representación de elementos para algunas columnas en la cuadrícula extjs?

Animar la cuadrícula de la vista del reciclador cuando cambia el número de columnas

Tamaño automático de las columnas de la cuadrícula según el valor en el valor de la cuadrícula en extjs6

Mostrar la vista de cuadrícula sobre la base de las columnas y filas ingresadas

¿Cómo calcular () el número de filas en una plantilla de cuadrícula?

Animar la cuadrícula de vista del reciclador cuando cambia el número de columnas

Recuento dinámico de filas y columnas de la cuadrícula con XAML

Recuento dinámico de filas y columnas de la cuadrícula con XAML

Cambiar dinámicamente el número de filas en una cuadrícula CSS

Cambiar dinámicamente el número de filas en una cuadrícula CSS

Ajustar programáticamente el número de filas en una cuadrícula con C #

¿Cómo agregar botones dinámicamente en formato de cuadrícula (filas y columnas) usando javascript?

Agregar una regla entre las columnas y filas de la cuadrícula CSS

TOP Lista

CalienteEtiquetas

Archivo