CSS Grid - сделать табличное переполнение сетки, когда элемент слишком большой - PullRequest
Новая
       2

CSS Grid - сделать табличное переполнение сетки, когда элемент слишком большой

0 голосов
/ 24 сентября 2019

Я пытаюсь создать таблицу с сеткой CSS.Пока что я создал простую схему.

Я должен создать сетки на уровне row (из-за того, что IRL таблицы содержат больше элементов, и я не могу их создать на уровне table).Пока это работает, если только нет очень длинного слова (или числа), так как в этом случае оно переполняет содержащую ячейку.

Мой вопрос: возможно ли переполнение таблицы, чтобы сделать ячейкипо крайней мере такой же большой, как самое большое отдельное слово или число?

Заранее спасибо!

Редактировать: мне нужно создать таблицу с сеткой CSS, так как мне нужно использовать тот же макетдля мобильной версии

Edit2: я не знаю заранее, сколько элементов у меня будет в строках / столбцах, поэтому мне нужно использовать repeat

.table {
  margin: 48px 0;
  box-shadow: 0 5px 10px -2px #cfcfcf;
  font-family: Arial;
}

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(72px, 1fr) );
  min-height: 48px;
  border-bottom: 1px solid #f1f1f1;
}

.column {
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid #f1f1f1;
  align-items: center;
  
}

.row:first-child {
  font-weight: bold;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="table">
      <div class="row">
        <div class="column">Name</div>
        <div class="column">Age</div>
        <div class="column">Favourite Book</div>
        <div class="column">Favourite Color</div>
        <div class="column">Favourite Meal</div>
      </div>
      <div class="row">
        <div class="column">Jimmy</div>
        <div class="column">23</div>
        <div class="column">None</div>
        <div class="column">White</div>
        <div class="column">Paella de Chorizo</div>
      </div>
      <div class="row">
        <div class="column">Johny</div>
        <div class="column">56</div>
        <div class="column">Finnegans Wake</div>
        <div class="column">Purple, Magenta and Violet</div>
        <div class="column">None</div>
      </div>
      <div class="row">
        <div class="column">Robert The Snake Robertson</div>
        <div class="column">1.234.567.890.000.000</div>
        <div class="column">The Count of Monte Cristo</div>
        <div class="column">Orange</div>
        <div class="column">Apples</div>
      </div>
    </div>
        
    
  </body>

</html>

Ответы [ 3 ]

1 голос
/ 24 сентября 2019

Вы используете сочетание сетки и flexbox.Попробуйте просто с сеткой:

Обновлено, чтобы установить встроенный стиль повтора (поскольку количество столбцов может измениться) 

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);/* overridden inline */
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.grid>div {
  padding: 8px 4px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.grid>div.th {
  font-weight: bold;
}
<div class="grid" style="grid-template-columns: repeat(5,1fr);">
  <div class="th">Name</div>
  <div class="th">Age</div>
  <div class="th">Favourite Book</div>
  <div class="th">Favourite Color</div>
  <div class="th">Favourite Meal</div>

  <div>Jimmy</div>
  <div>23</div>
  <div>None</div>
  <div>White</div>
  <div>Paella de Chorizo</div>

  <div>Johny</div>
  <div>56</div>
  <div>Finnegans Wake</div>
  <div>Purple, Magenta and Violet</div>
  <div>None</div>

  <div>Robert The Snake Robertson</div>
  <div>1.234.567.890.000.000</div>
  <div>The Count of Monte Cristo</div>
  <div>Orange</div>
  <div>Apples</div>

</div>
1 голос
/ 25 сентября 2019

Добавлять только разрыв слов: break-word;свойство в классе столбца

    .table {
      margin: 48px 0;
      box-shadow: 0 5px 10px -2px #cfcfcf;
      font-family: Arial;
    }

    .row {
      display: grid;
      grid-template-columns: repeat( auto-fit, minmax(72px, 1fr) );
      min-height: 48px;
      border-bottom: 1px solid #f1f1f1;
    }

    .column {
    display: flex;
    width: 100%;
    height: 100%;
    border: 1px solid #f1f1f1;
    align-items: center;
    word-break: break-word;
    }
    .row:first-child {
      font-weight: bold;
    }
    <!DOCTYPE html>
    <html>

      <head>
        <link rel="stylesheet" href="style.css">
      </head>

      <body>
        <div class="table">
          <div class="row">
            <div class="column">Name</div>
            <div class="column">Age</div>
            <div class="column">Favourite Book</div>
            <div class="column">Favourite Color</div>
            <div class="column">Favourite Meal</div>
          </div>
          <div class="row">
            <div class="column">Jimmy</div>
            <div class="column">23</div>
            <div class="column">None</div>
            <div class="column">White</div>
            <div class="column">Paella de Chorizo</div>
          </div>
          <div class="row">
            <div class="column">Johny</div>
            <div class="column">56</div>
            <div class="column">Finnegans Wake</div>
            <div class="column">Purple, Magenta and Violet</div>
            <div class="column">None</div>
          </div>
          <div class="row">
            <div class="column">Robert The Snake Robertson</div>
            <div class="column">1.234.567.890.000.000</div>
            <div class="column">The Count of Monte Cristo</div>
            <div class="column">Orange</div>
            <div class="column">Apples</div>
          </div>
        </div>
            
        
      </body>

    </html>
1 голос
/ 24 сентября 2019

Ну, вы можете использовать CSS fit-content(max-width) ( документы ), но я не знаю, можно ли его использовать вместе с grid repeat(). 

.row {
  display: grid;
  grid-template-columns: auto, fit-content(300px), fit-content(100px), auto, auto;
  min-height: 48px;
  border-bottom: 1px solid #f1f1f1;
}

Редактировать: Внутриrepeat (), вы можете использовать ключевое слово max-content . 

grid-template-columns: repeat(auto-fit, minmax(auto, max-content));

Возможно, вам придется добавить свои собственные правила переноса для некоторых ячеек.

...