El contenido de un elemento de la cuadrícula cambia su tamaño

Kasra Publicado en Dev

Kasra

Tengo cuatro elementos de cuadrícula que quiero que sean cuadrados perfectos. Hice esto usando (25vw) pero cuando coloco cosas en las cuadrículas debajo de estas cuadrículas cuadradas, se expanden y cambian por completo debido a la cuadrícula debajo de ellas.

* {

    margin: 0px;
    padding: 0px;
}

.wrapper {

    height: 100vh;

    display: grid;
    grid-template-columns: repeat(4, 25vw - 3.75px);
    grid-template-rows: minmax(0, 1.25fr) calc(25vw - 3.75px) 7fr 3fr 1.5fr;
    grid-gap: 5px;
}
.attendants {
    background: brown;
    grid-column: 1/2;
    grid-row: 3/4;
}
.header-attendants {
}
.list-attendants {
}
/*the rest is irrelevant*/

.navbar {

    background: white;
    grid-column: 1/5;
    grid-row: 1/2;
}
.webcam {

    background: black;
    grid-column: 1/2;
    grid-row: 2/3;
}
.class-background {

    background: purple;
    grid-column: 2/3;
    grid-row: 2/3;
}
.events {

    background: green;
    grid-column: 3/4;
    grid-row: 2/3;
}
.tools {

    background: pink;
    grid-column: 4/5;
    grid-row: 2/3;

}
.frame {

    background: yellow;
    grid-column: 2/4;
    grid-row: 3/5;
}
.chat {

    background: red;
    grid-column: 4/5;
    grid-row: 3/4;
}
.three-buttons {

    background: darkgreen;
    grid-column: 1/2;
    grid-row: 4/6;
}
.text-box {

    background: darkred;
    grid-column: 2/4;
    grid-row: 5/6;
}
.sharing-status {

    background: blue;
    grid-column: 4/5;
    grid-row: 4/6;
}

<!DOCTYPE html>
<html>
<head>
    <title>Focus</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="navbar">
            testing...
        </div>
        <div class="webcam">
            testing...
        </div>
        <div class="class-background">
            testing...
        </div>
        <div class="events">
            testing...
        </div>
        <div class="tools">
            testing...
        </div>
    <!-- this is what I'm struggling with, from here -->
        <div class="attendants">
            <div class="header-attendants">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris.
            </div>
            <div class="list-attendants">
                <div class="attendant">
                    <p class="name">John</p>
                    <p class="role">teacher</p>
                    <p class="joined-at">0:00</p>
                </div>
            </div>
        </div>
    <!-- to here -->
        <div class="frame">
            testing...
        </div>
        <div class="chat">
            testing...
        </div>
        <div class="three-buttons">
            testing...
        </div>
        <div class="text-box">
            testing...
        </div>
        <div class="sharing-status">
            testing...
        </div>
    </div>

    <script src="script.js" type="text/javascript"></script>
</body>
</html>

Idealmente, se vería así, independientemente del contenido de las cuadrículas:

* {

    margin: 0px;
    padding: 0px;
}


.wrapper {

    height: 100vh;

    display: grid;
    grid-template-columns: repeat(4, 25vw - 3.75px);
    grid-template-rows: minmax(0, 1.25fr) calc(25vw - 3.75px) 7fr 3fr 1.5fr;
    grid-gap: 5px;
}


.navbar {

    background: white;
    grid-column: 1/5;
    grid-row: 1/2;
}


.webcam {

    background: black;
    grid-column: 1/2;
    grid-row: 2/3;
}


.class-background {

    background: purple;
    grid-column: 2/3;
    grid-row: 2/3;
}


.events {

    background: green;
    grid-column: 3/4;
    grid-row: 2/3;
}


.tools {

    background: pink;
    grid-column: 4/5;
    grid-row: 2/3;

}


.attendants {

    background: brown;
    grid-column: 1/2;
    grid-row: 3/4;
    
    
}


.header-attendants {


    

}



.list-attendants {


    

}


.frame {

    background: yellow;
    grid-column: 2/4;
    grid-row: 3/5;
}


.chat {

    background: red;
    grid-column: 4/5;
    grid-row: 3/4;
}


.three-buttons {

    background: darkgreen;
    grid-column: 1/2;
    grid-row: 4/6;
}


.text-box {

    background: darkred;
    grid-column: 2/4;
    grid-row: 5/6;
}


.sharing-status {

    background: blue;
    grid-column: 4/5;
    grid-row: 4/6;
}

<!DOCTYPE html>
<html>
<head>
    <title>Focus</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="navbar">
            testing...
        </div>
        <div class="webcam">
            testing...
        </div>
        <div class="class-background">
            testing...
        </div>
        <div class="events">
            testing...
        </div>
        <div class="tools">
            testing...
        </div>
        <div class="attendants">
            <div class="header-attendants">
                    .
            </div>
            <div class="list-attendants">
                <div class="attendant">
                    <p class="name">John</p>
                    <p class="role">teacher</p>
                    <p class="joined-at">0:00</p>
                </div>
            </div>
        </div>
        <div class="frame">
            testing...
        </div>
        <div class="chat">
            testing...
        </div>
        <div class="three-buttons">
            testing...
        </div>
        <div class="text-box">
            testing...
        </div>
        <div class="sharing-status">
            testing...
        </div>
    </div>

    <script src="script.js" type="text/javascript"></script>
</body>
</html>

Cualquier ayuda será muy apreciada.

Acompañar Afif

Necesitas agregar calc()dentro de la repetición:

repeat(4, calc(25vw - 3.75px))

* {
  margin: 0px;
  padding: 0px;
}

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, calc(25vw - 3.75px));
  grid-template-rows: minmax(0, 1.25fr) calc(25vw - 3.75px) 7fr 3fr 1.5fr;
  grid-gap: 5px;
}

.attendants {
  background: brown;
  grid-column: 1/2;
  grid-row: 3/4;
}

.header-attendants {}

.list-attendants {}


/*the rest is irrelevant*/

.navbar {
  background: white;
  grid-column: 1/5;
  grid-row: 1/2;
}

.webcam {
  background: black;
  grid-column: 1/2;
  grid-row: 2/3;
}

.class-background {
  background: purple;
  grid-column: 2/3;
  grid-row: 2/3;
}

.events {
  background: green;
  grid-column: 3/4;
  grid-row: 2/3;
}

.tools {
  background: pink;
  grid-column: 4/5;
  grid-row: 2/3;
}

.frame {
  background: yellow;
  grid-column: 2/4;
  grid-row: 3/5;
}

.chat {
  background: red;
  grid-column: 4/5;
  grid-row: 3/4;
}

.three-buttons {
  background: darkgreen;
  grid-column: 1/2;
  grid-row: 4/6;
}

.text-box {
  background: darkred;
  grid-column: 2/4;
  grid-row: 5/6;
}

.sharing-status {
  background: blue;
  grid-column: 4/5;
  grid-row: 4/6;
}

<!DOCTYPE html>
<html>

<head>
  <title>Focus</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="navbar">
      testing...
    </div>
    <div class="webcam">
      testing...
    </div>
    <div class="class-background">
      testing...
    </div>
    <div class="events">
      testing...
    </div>
    <div class="tools">
      testing...
    </div>
    <!-- this is what I'm struggling with, from here -->
    <div class="attendants">
      <div class="header-attendants">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
      </div>
      <div class="list-attendants">
        <div class="attendant">
          <p class="name">John</p>
          <p class="role">teacher</p>
          <p class="joined-at">0:00</p>
        </div>
      </div>
    </div>
    <!-- to here -->
    <div class="frame">
      testing...
    </div>
    <div class="chat">
      testing...
    </div>
    <div class="three-buttons">
      testing...
    </div>
    <div class="text-box">
      testing...
    </div>
    <div class="sharing-status">
      testing...
    </div>
  </div>

  <script src="script.js" type="text/javascript"></script>
</body>

</html>

Para algunas funciones, puede omitir el me calc()gusta min(), max()o clamp()pero no es el caso derepeat()

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 en2021-02-28

Déjame decir algunas palabras

0Comentarios

Iniciar sesiónRevisión de participación posterior

Anterior:Seleccionar filas según el valor más cercano a

TOP Lista

Artículos

El contenido de un elemento de la cuadrícula cambia su tamaño

El contenido de un elemento de la cuadrícula cambia su tamaño

¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)

Ver todos los comentarios en un video de YouTube

Cómo utilizar HttpClient con cualquier certificado SSL, no importa lo "malo" que es

Redis 세션 저장소와 함께 SpringSessionBackedSessionRegistry 사용

Obtenga todos los comentarios y responda a los comentarios en un solo SQL

WPF pleine largeur DataGridColumn sur la largeur de DataGrid

Modbus Python Schneider PM5300

Today Extension con UICollectionView comportamiento diferente en comparación con la aplicación de vista única

Visualización KNN: cómo dibujar un círculo alrededor de un punto de datos que se conecta a N puntos más cercanos usando R

¿Cómo formatear el valor mínimo y máximo de android-range-seek-bar?

OAuth 2.0 utilizando Spring Security + WSO2 Identity Server

jmeter + Selenium iDE

¿Es una pila LAMJ un entorno posible?

Typescript compiling and changing filenames to lowercase all the time (VS2015)

Le snack-bar ne bouge pas FAB placé à l'intérieur du fragment

Vscode sin intellisense / autocompletado con múltiples proyectos

ElasticSearch: error al obtener bloqueos de nodo

Autocompletar con Java, Redis, elástico de la búsqueda, Mongo

Visual Studio 2012 Unit Test Report

Chartkick histogrammes plusieurs couleurs

使用FailureFolicy将`gcloud beta functions deploy`命令转换为Deployment Manager模板