Сетка CSS - согласование ширины столбца для повторяющихся строк независимо от ширины содержимого

У меня есть следующая сетка css, которая не сохраняет одинаковую ширину для повторяющихся строк. данные в каждой ячейке могут иметь разную длину. Как сохранить одинаковую ширину для всех повторяющихся строк?

Я хочу, чтобы столбец 1 имел ширину 10%, столбец 2 - 45% и оставался для столбца 3. Вот почему я использую:

grid-template-areas:
'user-l user-m user-m user-m user-m user-m user-m user-r user-r user-r user-r'

Данные user-container повторяются для "n" пользователей.

body {margin: 0}

.user-l {grid-area:user-l}
.user-m {grid-area:user-m}
.user-r {grid-area:user-r}

.user-container {
  display: grid;
  grid-template-areas:
  'user-l user-m user-m user-m user-m user-m user-m user-r user-r user-r user-r'
}

.user-l,
.user-m,
.user-r {
  border: 1px solid #ddd;
  padding: 20px;
}

.user-l {background-color: #2196F3}
.user-m {background-color: #219683}
.user-r {background-color: #216683}
<h1>Grid Elements - How to keep width the same ?</h1>

<p>In the example below, blue and green should have the same width all the time. </p>

<div class = "user-container">
  <div class = "user-l">
  	<p>Name: jsdsdsd djsds</p>
  </div>
  <div class = "user-m">
     <p>Age: 23</p>
  </div>
  <div class = "user-r">
  	<p>Occupation: Doctor</p>
  </div>
</div>

<div class = "user-container">
  <div class = "user-l">
  	<p>Name: ANother longer Names</p>
  </div>
  <div class = "user-m">
     <p>Age: 23</p>
  </div>
  <div class = "user-r">
  	<p>Occupation: Another Occupation</p>
  </div>
</div>

Удалите grid-template-area / grid-area и добавьте grid-template-columns: repeat (3, 1fr);

VXp 12.09.2018 07:36

@VXp Это сделало бы 3 столбца одинаковой ширины, верно? Я хочу, чтобы столбец 1 имел ширину 10%, столбец 2 - 45% и оставался для столбца 3.

Kal 12.09.2018 07:39

Да, тогда добавьте: grid-template-columns: 10% 45% 1fr;

VXp 12.09.2018 07:42

@VXp Если я удалю области сетки, как я могу контролировать отзывчивое поведение? Для планшетов я хочу, чтобы они располагались один под другим, поэтому будет ли grid-template-columns: 100% 100% 1fr; отображать столбцы один под другим?

Kal 12.09.2018 07:49

Вам ничего из этого не нужно, grid-template-columns: 1fr; сделает это просто в 1 столбец при определенной ширине экрана с помощью запросов @media ofc.

VXp 12.09.2018 07:51

@VXp Хорошо, имеет смысл. Думаю, это ответ.

Kal 12.09.2018 07:55

Скорее всего так и есть.

VXp 12.09.2018 07:55
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
3
7
415
2

Ответы 2

создал и зафиксировал ширину для user-l user-m user-r и добавил grid-template-columns: 10% 45% 1fr;, который предоставит размер div

body {margin: 0}

.user-l {grid-area:user-l}
.user-m {grid-area:user-m}
.user-r {grid-area:user-r}

.user-container {
  display: grid;
 grid-template-columns: 10% 45% 1fr;
  grid-template-areas:
  'user-l user-m  user-r'
  
}

.user-l,
.user-m,
.user-r {
  border: 1px solid #ddd;
  padding: 20px;
}

.user-l {background-color: #2196F3; }
.user-m {background-color: #219683;}
.user-r {background-color: #216683;}
<h1>Grid Elements - How to keep width the same ?</h1>

<p>In the example below, blue and green should have the same width all the time. </p>

<div class = "user-container">
  <div class = "user-l">
  	<p>Name: jsdsdsd djsds</p>
  </div>
  <div class = "user-m">
     <p>Age: 23</p>
  </div>
  <div class = "user-r">
  	<p>Occupation: Doctor</p>
  </div>
</div>

<div class = "user-container">
  <div class = "user-l">
  	<p>Name: ANother longer Names</p>
  </div>
  <div class = "user-m">
     <p>Age: 23</p>
  </div>
  <div class = "user-r">
  	<p>Occupation: Another Occupation</p>
  </div>
</div>

Этот код ниже должен исправить проблему. Ответ основан на комментариях выше от VXp

<!DOCTYPE html>
<html>
<head>
<style>

.user-container { display: grid;}
.user-container  {
	grid-template-columns: 10% 45% 1fr; 
  }
  
.user-l {
background-color: #2196F3;
border: 1px solid #ddd;
padding 20px;
}
.user-m {
background-color: #219683;
border: 1px solid #ddd;
padding 20px;
}
.user-r {
background-color: #216683;
border: 1px solid #ddd;
padding 20px;
}

</style>
</head>
<body>

<h1>Grid Elements - How to keep width the same ?</h1>

<p>In the example below, blue and green should have the same width all the time. </p>


<div class = "user-container">
  <div class = "user-l">
  	<p>Name: jsdsdsd djsds</p>
  </div>
  <div class = "user-m">
     <p>Age: 23</p>
  </div>
  <div class = "user-r">
  	<p>Occupation: Doctor</p>
  </div>
</div>

<div class = "user-container">
  <div class = "user-l">
  	<p>Name: ANother longer Names</p>
  </div>
  <div class = "user-m">
     <p>Age: 23</p>
  </div>
  <div class = "user-r">
  	<p>Occupation: Another Occupation</p>
  </div>
</div>

</body>
</html>

Другие вопросы по теме