Использование CSS Grid и получение специально подобранного контента - PullRequest
Новая
       8

Использование CSS Grid и получение специально подобранного контента

0 голосов
/ 08 апреля 2020

Я пытаюсь использовать grid-template-columns: auto auto min-content auto; Но я не заставляю его работать должным образом. Я хотел бы, чтобы содержимое в желтом блоке точно соответствовало содержимому. Этот контент будет переменным и может измениться. Однако, когда я запускаю следующий код. Он разбивает содержимое на вторую строку, когда я просто хочу, чтобы он заполнил все в первой строке. Таким образом, в этом случае октябрь будет в первой строке, а 25 будет ниже. Мне бы хотелось, чтобы он был на одной линии, учитывая, что этот контент будет переменным. 

.box {
  color: #FFF;
  font-family: sans-serif;
}

.box--green {
  background-color: #3D9970;
}

.box--blue {
  background-color: #0074D9;
}

.box--yellow {
  background-color: #FFDC00;
}

.box--red {
  background-color: #FF4136;
}


/* 
     * position your boxes wherever you want in your grid
     */

.swimmeet-meta {
  display: grid;
  grid-template-columns: 30px 30px fit-content auto;
  grid-template-rows: repeat(2, 1fr);
  /* 2 rows */
}

.swimmeet-meta__item--play {
  grid-area: 1 / 1 / 3 / 3;
}

.swimmeet-meta__item--title {
  grid-area: 1 / 3 / 2 / 5;
  grid-column-start: 3;
  grid-column-end: 5;
}

.swimmeet-meta__item--date {
  grid-area: 2 / 3 / 3 / 4;
}

.swimmeet-meta__item--time {
  grid-area: 2 / 4 / 3 / 5;
}
<main class="swimmeet-meta">
  <div class="box swimmeet-meta__item--play box--green">Book</div>
  <div class="box swimmeet-meta__item--title box--blue">Join swim meeting soon daily</div>
  <div class="box swimmeet--meta__item--date box--yellow">October 26</div>
  <div class="box swimmeet--meta__item--time box--red">1 hour</div>
</main>

1 Ответ

1 голос
/ 08 апреля 2020

измените шаблон на grid-template-columns: 30px 30px auto 1fr; и упростите код, как показано ниже: 

.box {
  color: #FFF;
  font-family: sans-serif;
}

.box--green {
  background-color: #3D9970;
}

.box--blue {
  background-color: #0074D9;
}

.box--yellow {
  background-color: #FFDC00;
}

.box--red {
  background-color: #FF4136;
}
.swimmeet-meta {
  display: grid;
  grid-template-columns: 30px 30px auto 1fr;
  grid-template-rows: repeat(2, 1fr);
}

.swimmeet-meta__item--play {
  grid-area: span 2/span 2;
}

.swimmeet-meta__item--title {
  grid-column: span 2;
}
<main class="swimmeet-meta">
  <div class="box swimmeet-meta__item--play box--green">Book</div>
  <div class="box swimmeet-meta__item--title box--blue">Join swim meeting soon daily</div>
  <div class="box swimmeet--meta__item--date box--yellow">October 26</div>
  <div class="box swimmeet--meta__item--time box--red">1 hour</div>
</main>
...