Выровнять элементы столбца сетки (например, justify: flex-start)

<thing>
    <h2 class='heading'>
        HEADING
    </h2>

    <video-thing>
        <img src="https://placehold.it/1600x1100">
    </video-thing>

    <description>
        <p>TEXT</p>

        <button class='unfold'>Read more</button>
    </description>
</thing>

Это естественный порядок вещей в разметке.

В какой-то момент я собираюсь сделать это:

Но - я все еще думаю о мире флекс-боксов. Я хочу, чтобы этот первый «столбец» выровнял по гибкому началу ish.

Обратите внимание, как более длинный текст заполняет пространство в первом элементе, а короткий текст во втором примере остается «наполовину».

CodePen

Я предполагаю, что это выравнивание является "осью блока" re: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

@media (min-width: 800px) {
    thing {
        display: grid;
        grid-template-columns: [message] 1fr [visual] 1fr;
        /* HERE */
    }
    .heading, description {
        grid-column: message;
    }
    video-thing {
        grid-column: visual;
        grid-row: 1/3;
    }
}

Я тоже работал с grid-area, но пришел к тому же результату.

Я знаю, что это полностью отличается от flex-box /, но я почти уверен, что то, что я предлагаю, возможно - и что я просто еще не знаю, как говорить «сетка». ; )

ОБНОВЛЕНИЕ Предложение @Temani Afif просветило меня, поэтому вот еще несколько изображений, которые помогут проиллюстрировать это.

Без явной установки grid-template-rows для родительского элемента - он будет выводить на основе любых настроек строки сетки, которые вы установили для дочернего элемента ... так что в этом случае - будет создана третья строка, которая будет `` расти '', потому что они `` автоматические '' 'по умолчанию / но только с двумя - не может. Также будет работать, если вы поставите 1/4 или span 100 для записи. Или явно установить больше строк и с областью - или несколькими другими способами.

css css-grid

12.05.2020

Ответы:

Вероятно, вы ищете такую конфигурацию:

thing {
    display: grid;
    grid-template-columns:  1fr 1fr;
    grid-template-rows:auto auto auto; /*not mandatory, you can remove it */
}
video-thing {
    grid-column: 2;
    grid-row: span 3;
}

* {
  box-sizing: border-box;
}


/* + reset */

img {
  display: block;
  width: 100%;
  height: auto;
}

thing,
video-thing,
description {
  display: block;
}

body {
  /* some context */
  width: 98%;
  max-width: 900px;
  margin: 100px auto;
}

thing {
  position: relative;
  padding: 10px;
}

@media (max-width: 799px) {
  video-thing {
    margin: 20px 0;
  }
}

@media (min-width: 800px) {
  thing {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .heading,
  description {
    padding-right: 20px;
  }
  description {
    margin-top: 20px;
  }
  video-thing {
    grid-column: 2;
    grid-row: span 3;
  }
}

thing {
  border: 4px solid green;
}

.heading {
  border: 4px solid orange;
}

description {
  border: 4px solid blue;
}

video-thing {
  border: 4px solid red;
}

.heading {
  font-family: 'Helvetica';
  font-size: 24px;
  font-weight: 700;
}

p {
  font-family: 'Georgia';
  font-size: 16px;
  line-height: 1.4;
}

p+p {
  margin-top: 10px;
}

button {
  margin-top: 20px;
}

thing+thing {
  margin-top: 60px;
}

<thing>
  <h2 class='heading'>Video section / what you should know number 1</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>













<thing>
  <h2 class='heading'>Video section / what you should know number 2</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p>short text</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>



<thing>
  <h2 class='heading'>Video section / what you should know number 3</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>



<thing>
  <h2 class='heading'>Video section / what you should know number 4</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>



<thing>
  <h2 class='heading'>Video section / what you should know number 5</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>


<thing>
  <h2 class='heading'>Video section / what you should know number 6</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>

12.05.2020

Хорошо ... хорошо ... Мне это нравится. Итак - это действительно просто разбивает вещь на так много маленьких строк, что они могут разбиться вместе ... - так что было бы то же самое, если бы вы использовали grid-row: 1/7; или grid-row: span 100; - верно? - и количество строк будет просто установлено на основе этого 12.05.2020

@sheriffderek Да, именно так, мы называем это неявной сеткой. Если вы хотите охватить столбцы / строки, не определенные в явной сетке, новая будет создана автоматически. 12.05.2020

Это очень важно для моей извращенной ментальной модели на этом фронте. Спасибо. Я добавил изображение к вопросу, чтобы показать ваш ответ. С таким пониманием - я мог бы сделать это несколькими разными способами. Превосходно. 12.05.2020

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

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

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Typescript Smart Contracts Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP