• Звідки: Козин
  • Дата реєстрації: 03.07.2017
  • Повідомлень: 1 389
    • Репутація: 436

Тема: CSS grid fail

Хочу написати статтю CSS grid VS WPF на яку мене надихнула стаття https://games.greggman.com/game/css-grid-fail/. Що мені потрібно так це за допомогою  зв'язки CSS і HTML зробити так як на картинці.
https://games.greggman.com/images/misc/css-grid-issue-01.png
За допомогою WPF я це вже зробив а от з CSS ні. Було б добре якби хтось з вас це зробив.

Ось код на XAML:

<Window x:Class="grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:grid"
        mc:Ignorable="d"
        Title="CSS sucks" Height="350" Width="525">
    <UniformGrid Columns="2" HorizontalAlignment="Stretch" Width="Auto" Height="Auto">
        <Grid DockPanel.Dock="Left" HorizontalAlignment="Stretch">
            
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            
            <Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Background="#FFD62D12">D</Label>

            <Label Grid.Column="0" Grid.Row="2" Background="#FFDE9020">E</Label>
            <Label Grid.Column="0" Grid.Row="3" Background="#FFC4DE20">F</Label>

            <Label Grid.Column="1" Grid.Row="2" Grid.RowSpan="2" Background="#FFDA9E48">G</Label>
            
        </Grid>
        
        <Grid HorizontalAlignment="Stretch" DockPanel.Dock="Right">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Background="#FFD8BD3F" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Center">A</Label>
            <Label Grid.Row="1" Background="#FF62BD23" HorizontalContentAlignment="Center">B</Label>
            <Label Grid.Row="2" Background="#FF8AEEE9" HorizontalContentAlignment="Center">C</Label>
            
        </Grid>
    </UniformGrid>
</Window>

І те що вийшло:
https://s14.postimg.cc/gm9afev9t/cssss.png

2 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 452
    • Репутація: 2772

Re: CSS grid fail

XAML не має переваг над HTML+CSS (див. споілер "Чистий Grid").

Нижче наведено 3 різні способи реалізації сітки в HTML+CSS (саме такої, як у вас на картинці).

▼Файли, які використовуються у всіх наступних прикладах

Ці 2 файли було створено тільки для налаштування html сторінок, на них можна навіть не дивитися.

colors.css

body {
    color: #000;
    background-color: #fff;
}
.gold { background-color: #D8BD3F; }
.green { background-color: #62BD23; }
.cyan { background-color: #8AEEE9; }
.red { background-color: #D62D12; }
.orange { background-color: #DE9020; }
.yellowgreen { background-color: #C4DE20; }
.burlywood { background-color: #DA9E48; }

init.css

body {
    position: fixed;
    margin: 0 0;
    width: 100%;
    height: 100%;
}
body>* {
    position: relative;
}
div {
    display: block;
    font-size: 1.1rem;
    margin: 0 0;
    padding: 0 0;
    min-width: 2em;
    min-height: 2em;
    width: auto;
    background-color: #484;
    direction: ltr;
    box-sizing: border-box;
    vertical-align: middle;
}
div[id] { padding: 0.5em 1em; }

.no-whitespace { font-size: 0; }
.text-align-center { text-align: center; }
▼Чистий блочний (без flex і без grid)

block.html

<!DOCTYPE html>
<html lang="uk">
    <head>
        <title>Block</title>
        <link rel="stylesheet" type="text/css" href="colors.css">
        <link rel="stylesheet" type="text/css" href="init.css">
        <link rel="stylesheet" type="text/css" href="block.css">
    </head>
    <body class="row count-2 rtl no-whitespace">
        <div class="col count-3 text-align-center">
            <div id="a" class="gold">A</div>
            <div id="b" class="green">B</div>
            <div id="c" class="cyan">C</div>
        </div>
        <div class="col count-2">
            <div id="d" class="red">D</div>
            <div class="row count-2 no-whitespace">
                <div class="col count-2">
                    <div id="e" class="orange">E</div>
                    <div id="f" class="yellowgreen">F</div>
                </div>
                <div id="g" class="burlywood">G</div>
            </div>
        </div>
    </body>
</html>

block.css

.rtl { direction: rtl; }

.row>* {
    height: 100%;
    display: inline-block;
}
.col>* {
    width: 100%;
    display: block;
}

.row.count-2>* { width: 50%; }
.col.count-2>* { height: 50%; }
.col.count-3>* { height: 33.33%; }

/* This trick allow to remove
 * class "count-n" (n=2..4)
 * from html and css. *
.row>*:first-child:nth-last-child(1) {
    width: 100%;
}
.row>*:first-child:nth-last-child(2),
.row>*:first-child:nth-last-child(2)~div {
    width: 50%;
}
.row>*:first-child:nth-last-child(3),
.row>*:first-child:nth-last-child(3)~div {
    width: 33.3333%;
}
.row>*:first-child:nth-last-child(4),
.row>*:first-child:nth-last-child(4)~div {
    width: 25%;
}
.col>*:first-child:nth-last-child(1) {
    height: 100%;
}
.col>*:first-child:nth-last-child(2),
.col>*:first-child:nth-last-child(2)~div {
    height: 50%;
}
.col>*:first-child:nth-last-child(3),
.col>*:first-child:nth-last-child(3)~div {
    height: 33.3333%;
}
.col>*:first-child:nth-last-child(4),
.col>*:first-child:nth-last-child(4)~div {
    height: 25%;
}
/**/
▼Блочний + Flex

flex.html

<!DOCTYPE html>
<html lang="uk">
    <head>
        <title>Flex</title>
        <link rel="stylesheet" type="text/css" href="colors.css">
        <link rel="stylesheet" type="text/css" href="init.css">
        <link rel="stylesheet" type="text/css" href="flex.css">
    </head>
    <body class="row rtl no-whitespace">
        <div class="col text-align-center">
            <div id="a" class="gold">A</div>
            <div id="b" class="green">B</div>
            <div id="c" class="cyan">C</div>
        </div>
        <div class="col">
            <div id="d" class="red">D</div>
            <div class="row no-whitespace">
                <div class="col">
                    <div id="e" class="orange">E</div>
                    <div id="f" class="yellowgreen">F</div>
                </div>
                <div id="g" class="burlywood">G</div>
            </div>
        </div>
    </body>
</html>

flex.css

.rtl {
    direction: rtl; /* or
    flex-flow: row-reverse;*/
}

.row {
    display: flex;
    flex-flow: row;
}
.col {
    display: flex;
    flex-flow: column;
}
.row>* {
    height: 100%;
    flex: 1;
}
.col>* {
    width: 100%;
    flex: 1;
}
▼Чистий Grid

Лєпота.

grid.html

<!DOCTYPE html>
<html lang="uk">
    <head>
        <title>Grid</title>
        <link rel="stylesheet" type="text/css" href="colors.css">
        <link rel="stylesheet" type="text/css" href="init.css">
        <link rel="stylesheet" type="text/css" href="grid.css">
    </head>
    <body class="no-whitespace">
        <div id="a" class="text-align-center gold">A</div>
        <div id="b" class="text-align-center green">B</div>
        <div id="c" class="text-align-center cyan">C</div>
        <div id="d" class="red">D</div>
        <div id="e" class="orange">E</div>
        <div id="f" class="yellowgreen">F</div>
        <div id="g" class="burlywood">G</div>
    </body>
</html>

grid.css

body {
    display: grid;
    grid-gap: 0 0;
    grid-template-areas:
        'd d a a'
        'd d a a'
        'd d a a'
        'd d a a'
        'd d b b'
        'd d b b'
        'e g b b'
        'e g b b'
        'e g c c'
        'f g c c'
        'f g c c'
        'f g c c';
}
#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }
#d { grid-area: d; }
#e { grid-area: e; }
#f { grid-area: f; }
#g { grid-area: g; }

Всі ці файли є в архіві.

Post's attachments

html_css_grid_flex_block.7z 1.36 kb, 347 downloads since 2018-05-06 

Подякували: FakiNyan, javascriptIsLife, vladkrivtsun3

leofun01 вебсайт

3 Відповідь від javascriptIsLife

  • Звідки: Козин
  • Дата реєстрації: 03.07.2017
  • Повідомлень: 1 389
    • Репутація: 436

Re: CSS grid fail

XAML не має переваг над HTML+CSS

Мені боляче це читати.

4 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 506
    • Репутація: 824

Re: CSS grid fail

до слова: хтось має досвід використовування того новомодного CSS grid у реальних навантажених проектах?

karmeljuk вебсайт

5 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 452
    • Репутація: 2772

Re: CSS grid fail

CSS grid до "навантажених проектів" має таке саме відношення як CSS flex до "навантажених проектів", тобто ніяке (загалом).
Мій випадок складно назвати досвідом. Я керуюсь дуже простим правилом: не вставляй код, який не є необхідним.
Якщо є потреба розтягнути групу однорівневих* html тегів по прямокутній області (не в 1 рядок і не в 1 стовп і це не статичний table), то тут однозначно grid.
*) однорівневі теги - теги, в яких однаковий батьківський тег. (Див. споілер "Чистий Grid" вище)

Подякували: koala, ostap34PHP, LoganRoss3

leofun01 вебсайт

6 Відповідь від javascriptIsLife

  • Звідки: Козин
  • Дата реєстрації: 03.07.2017
  • Повідомлень: 1 389
    • Репутація: 436

Re: CSS grid fail

Щось я не знаю як написати пасквіль про HTML і CSS. Не XAML а WPF.