Jump to content
Sign in to follow this  
lynkfs

css grid

Recommended Posts

Started to do some experiments with CSS Grid

Basically CSS Grid is a grid component built into all modern browsers, including mobile. The good thing about it is it can be used as a simple grid, as a layout mechanism for forms or other components and can be used to be responsive to screen sizes.

1) A simple grid.

 Since this is based on css, it can only be teased into life by manipulating the stylesheet. Either by just adding css to it manually or doing it in code :

 //add some styles in code
  var s1 := #'
  .TGrid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 0.8em;
  }';
  document.styleSheets[document.styleSheets.length-1].insertRule(s1, 0);
//
  s1 := #'
  .afirst {
    grid-column: 1;
  }';
  document.styleSheets[document.styleSheets.length-1].insertRule(s1, 0);

This snippet adds a grid class to the stylesheet and a class for the first column in this grid

 

Fill up the grid, in plain html here, by adding cells as children :

  var s := '<div class="TGrid" id="mygrid">';              

  for var i := 0 to 100 do begin
    s := s + '<div class="afirst">row ' + inttostr(i+1) + '</div>'';
  end;

  s := s + '</div>';

 

This can be made into a regular component :

var MyCSSGrid : TCSSGrid := TCSSGrid.Create(self);
  MyCSSGrid.SetBounds(50,50,500,200);
  MyCSSGrid.NrofColumns := 4;

  For var i := 1 to 1000-1 do begin
    MyCSSGrid.AddCell('row ' + inttostr(i), 1);  //column 1
    For var j := 2 to 4 do begin
      MyCSSGrid.AddCell('cell[' + inttostr(i) + ',' + inttostr(j) + ']', j);  //column 2-4
    end;
  end;

  MyCSSGrid.Show;

 

A demo of such a component with 4 columns and 1000 rows

 

Share this post


Link to post
Share on other sites

2) using css grid to make a responsive 'form'

The below component does some simple layouting of controls and also reacts to screen-sizing, both using the css grid :

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  var ResponsiveForm : TResponsiveForm := TResponsiveForm.Create(self);
  ResponsiveForm.SetBounds(40,40,500,220);
  ResponsiveForm.AutoHeight := true;

  ResponsiveForm.Add('Name',TW3EditBox);
  ResponsiveForm.Add('Email',TW3EditBox);
  ResponsiveForm.Add('Township',TW3EditBox);
  ResponsiveForm.Add('Comments',TW3Memo);
  ResponsiveForm.Add('Submit',TW3Button,2);
end;

Demo here

It is not really 100% responsive, as the labels should shift above the controls when screen size becomes small. It doesn't however look too bad and the tediousness of aligning labels and controls is taken care of by the css grid. (Adapted from this article). 

It's probably as easy though to use anchors creating the same result
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×