Jump to content

Recommended Posts

  • Moderators

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

 

Link to post
Share on other sites
  • 2 weeks later...
  • Moderators

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
 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...