CSS grid layout equal to WPF grid

Question

I'm generating a WPF grids within my window on runtime which look for example like this:

      <Grid Height="500"  Width="1000" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
            </Grid>

So the first, third and fourth column will have half the width of the second column.

What I want to do is generate a css layout in a ASP.NET Webforms application which has the same layout, preferabely optimized for smartphones and tablets aswell. I usually work with bootstap, which offers a very effective way of generating layouts. For example:

<div class="row">
  <div class="col-1">col</div>
  <div class="col-2">col</div>
  <div class="col-1">col</div>
  <div class="col-1">col</div>
</div>

Unfortunately in this example there there is no way to do this , since the bootstrap layout has a 12 column grid and as seen in the example above the width will never be filled since the column with is bound to the grid layout. How to achieve this? Does not matter if other libraries are required.

EDIT:

The number of columns may vary, and there may be multiple grids with different number of columns on one single page. Furthermore the widths 1*,2*,1*,1* is just an example. It might as well be something like 5*,2*,2*,1*,1* ( first column 5 times the width of the last two and column 2 and 3 double the width of the last two )

Answer 1

CSS grid should let you do something very similar to the WPF grid. Translating the above to CSS grid could be as simple as something like this:

<div class="grid">
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <!-- however many cells -->
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
}

That will give you a layout where the second column is twice the width of the rest. Children of .grid will automatically sort themselves into rows if there are more than the 4 specified in the column template. So 8 children will make 2 rows, 16 children will make 4 rows, 9 children will make two full rows and a row with 1 column, and so on.

Answer 2

If you want adaptive UI and flexible grid sizes without writing everything from scratch then there are a number of alternatives to Bootstrap. I suggest you look at Pure.css first https://purecss.io/grids/

I think several other options also follow the 12 column formula. For example, simple grid. https://www.agriya.com/blog/15-alternatives-bootstrap-foundation-skeleton/

If you don't fancy any of them then you could consider flexbox. If you're not used to using it then this page will give you a flavour: https://css-tricks.com/dont-overthink-flexbox-grids/ That has fixed widths. Different devs have different preferences on whether to use percentages or fixed widths. There's also min-width and max-width of course.

If css and html are rather new to you and you're on a desk/lap top choke down the width of this page and take a look at what happens.

Answer 3

grid-template-columns: 1fr 2fr 1fr 1fr;

By setting the display property of your parent DIV to grid and then put the above CSS property will make your grid as the first, third and fourth cell will be half the size of your second cell inside your parent DIV.