Two column two row css

Layout with two equal height columns and one column has two rows

I am developing a forum theme at the moment, and am trying to figure out how to do the last bits, the posts. Example of what I’d like to make: So the key things to keep in mind here is how User Info and Post Content have different colors, as well as the Post Description in the grid is in the same column as the Post Content. Using a simple div setup doesn’t work, as I need the User Info height to control the height of Post Content and vice versa. Having a wrapper element with the background color of User Info would work, but only if the Post Content is taller than User Info. I am really just looking for brainstorming here. What would be the best way to go about doing this? I created a draft of what the final result should look like here: It should be fine with the code you have provided altered slightly, but I have some questions. 1) You commented the description has a set height? Does it need to? Worst case scenario I just adjust this height in media queries. 2) I probably need to have some columns within Post description too. As you see in my draft there’s a left container with the timestamp (let’s call that desc-meta) of the post, and to the right there’s a permalink with ID (let’s call that desc-ID). There’s also a set of post options (Edit, report etc.) between the two (let’s call that desc-edit), but aligned to the right side of the description. From my brief understanding of flex I can’t figure out how to always keep the desc-meta and desc-ID on the same row, while desc-meta can be moved down if needed on smaller screens.

I wish I had something to share. I work on something I think will do it for half an hour maybe, then I realize it’s so fundamentally wrong that I scrap it. It’s really the startup help I need.

Источник

Flexbox 3 divs, two columns, one with two rows

But I can’t seem to get it working in flexbox, is this possible?

It’s simple if you can set a fixed height on the container. Otherwise, no, it’s not possible natively with flexbox. You would need an ugly hack.

@ZimSystem, yes, if that’s an option, that’s a good solution. Simply wrap the two items on the right in a container, which becomes a sibling to the left item. Done.

here is a float example codepen.io/gc-nomade/pen/ZLKmLm used for an answer of stackoverflow.com/questions/41797496/… (flex and grid are also options (for 3 siblings) only grid will allow to let height aside . but not really yet avalaible 🙁

3 Answers 3

The Legit Method:
*Recommended

.flex-row < flex-direction: row; display: flex; >.flex-column < flex-direction: column; display: flex; >.flex-body < display: flex; >.flex-body div:not([class*="flex"])

The Hackish Method:
*Not Recommended (I’m sure you’ll notice why)

.flex-body < display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; align-content: stretch; align-items: stretch; transform: rotate(90deg); max-width: 500px; margin: auto; >.flex-body div < border: 1px solid white; height: 300px; flex: 1 1 200px; >.flex-body div:last-of-type

@Macilias Look at row-spans, for columns that need to span more than one row. The rest should be pretty straight forward.

After thinking about this a little more, it is possible with flexbox. The container just has to have a defined height ( % , px or vh ) will work.

Using flexbox is very simple, you just need a container for these three div elements.

Let’s define a div with a .box class and add the div elements. Also let’s add three classes for the colors: .red , .green and .blue and two classes to handle the columns left and right .

Now we define the box class as a flexbox:

Then we define the direction as column (vertical) and if it can be flowed wrap :

Also, we can define the dimensions of the div elements. left will be 45% of the parent width and 100% of the parent height .

While right will be 55% of the parent width and 50% (half) of the parent height .

.box < display: flex; flex-flow: column wrap; width: 400px; height: 100px; >.red < background: #cc092f; >.green < background: #09cc69; >.blue < background: #0980cc; >.left < width: 45%; height: 100%; >.right

Источник

Полное визуальное руководство/шпаргалка по CSS Grid

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.

Архитектура CSS Grid

Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.

Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).

К слову, если вас интересует Флекс, вот соответствующая статья.

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

Обратите внимание: красным цветом отмечены сокращения для свойств:

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

Настройка проекта

Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:

1. Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
2. Создаем файлы index.html и style.css
3. Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

HTML

Создаем 3 контейнера внутри body :

Источник