Equal width columns in CSS Grid

TL;DR grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; The common answer of repeat(3, 1fr) is not quite correct. This is because 1fr is about the distribution of available(!) space. This breaks as soon as the content becomes bigger than the track size. By default, it does not overflow and adjust the column width accordingly. That’s why not … Read more

Matplotlib: draw grid lines behind other graph elements

According to this – http://matplotlib.1069221.n5.nabble.com/axis-elements-and-zorder-td5346.html – you can use Axis.set_axisbelow(True) (I am currently installing matplotlib for the first time, so have no idea if that’s correct – I just found it by googling “matplotlib z order grid” – “z order” is typically used to describe this kind of thing (z being the axis “out of … Read more

How do I databind a ColumnDefinition’s Width or RowDefinition’s Height?

Create a IValueConverter as follows: public class GridLengthConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { double val = (double)value; GridLength gridLength = new GridLength(val); return gridLength; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { GridLength val = (GridLength)value; return val.Value; } } You can … Read more

Nested rows with bootstrap grid system?

Bootstrap Version 3.x As always, read Bootstrap’s great documentation: 3.x Docs: https://getbootstrap.com/docs/3.3/css/#grid-nesting Make sure the parent level row is inside of a .container element. Whenever you’d like to nest rows, just open up a new .row inside of your column. Here’s a simple layout to work from: <div class=”container”> <div class=”row”> <div class=”col-xs-6″> <div class=”big-box”>image</div> … Read more

XAML Grid Visibility Transition?

So as a quick example, one way of doing this; <Grid Grid.RowSpan=”2″ x:Name=”TheGrid” Margin=”30,30,0,30″ Visibility=”{Binding IsSearchEnabled, Converter={StaticResource visibilityConverter}}”> <Grid.RowDefinitions> <RowDefinition Height=”60″/> <RowDefinition Height=”*”/> </Grid.RowDefinitions> <!– Start the magic –> <Grid.RenderTransform> <TranslateTransform x:Name=”SlideIn” X=”750″ /> </Grid.RenderTransform> <Grid.Triggers> <EventTrigger RoutedEvent=”Grid.Loaded”> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”SlideIn” Storyboard.TargetProperty=”X”> <SplineDoubleKeyFrame KeyTime=”0:0:1.25″ Value=”0″ /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”TheGrid” Storyboard.TargetProperty=”Opacity”> <SplineDoubleKeyFrame KeyTime=”0:0:1.55″ Value=”1″ /> … Read more

html5 vertical spacing issue with

Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block? First of all, browsers do not have a “HTML5 mode”. What they have are three modes “Quirks”, “Limited Quirks” (aka Almost Standards) and “Standards” mode. There is only one difference between … Read more