Как разделить на два любых столбца по CSS - PullRequest
Новая
       8

Как разделить на два любых столбца по CSS

0 голосов
/ 12 сентября 2018

Вот код из школ w3. Там 9 блоков. Но я хочу просто разделить ширину 3-го столбца 1-й строки на два. Как я могу это сделать? Вот код ниже 

.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;
}
<!DOCTYPE html>
<html>
<body>

  <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>

</body>
</html>

Вот как это должно выглядеть: enter image description here

Ответы [ 3 ]

0 голосов
/ 12 сентября 2018

Попробуйте сделать это: 

.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;
}

.grid-item3 {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  text-align: center;
  display: flex;
}

.grid-subitem {
   background-color: green;
   flex:1;
   border: 1px solid rgba(0, 0, 0, 0.8);
   height:100%;
   width: 100%;
   justify-content: center;
   align-items: center;
   display: flex;
}

<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item3">
        <div class="grid-subitem">3.1</div>
        <div  class="grid-subitem">3.2</div>
    </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>

</body>
</html>
0 голосов
/ 12 сентября 2018 

.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;
}
.div-span{
  width: 20%;
  display:table-cell;
}
.make-border{
  border-right: 1px solid rgba(0, 0, 0, 0.8);
}
<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>  
    <div class="grid-item">
     <div class="div-span make-border">Umar</div>
     <div class="div-span">Bilal</div>
    </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>

</body>
</html>
0 голосов
/ 12 сентября 2018

Вариант 1

Вам необходимо обернуть новые контейнеры в новый div и создать подсеть : 

.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;
}

.subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="subgrid">
    <div class="grid-item">3</div>
    <div class="grid-item">3.1</div>
  </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>

Примечание

Обратите внимание, что из-за padding: 20px; эти столбцы подсетки не вписываются в ширину, которая доступна по умолчаниюПредставление фрагмента StackOverflow, поэтому ширина настраивается таким образом, чтобы первые два обычных столбца теперь были менее широкими, чем третий, содержащий подсетку.Даже если они достаточно широки, браузер решает, какую ширину визуализировать каждый столбец, как в элементе table.

Параметр 2

Другой вариант - задать 4 столбца.на .grid-container, а затем используйте grid-column-start: span 2; в ячейках 6 и 9. Новый контейнер сетки будет определен следующим образом, если вы хотите столбцы равной ширины: 

grid-template-columns: 2fr 2fr 1fr 1fr;


.grid-container {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 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;
}

.colspan-2 {
  grid-column-start: span 2;
}
<!DOCTYPE html>
<html>

<body>

  <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">3.1</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item colspan-2">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item colspan-2">9</div>
  </div>

</body>

</html>
...