wml::std::grid(3)

📦
version 2.32.0 · 3 versions
, in debian bookworm, debian trixie, ubuntu jammy, ubuntu noble, ubuntu questing

✨ wml::std::grid ✨

okay bestie, welcome to the wml::std::grid page from the EN Tools manual (yes it's a section 3 one, we love a library page 💅). this is the one that gives you a grid. a LAYOUT GRID. let's go 🎀

🌸 NAME 🌸

wml::std::grid — it's a Layout Grid, no cap. that's literally the whole name. iconic.

🦋 SYNOPSIS 🦋

#use wml::std::grid

<grid [attributes]>
  <cell [attributes]>...</cell>
    :
  <cell [attributes]>...</cell>
</grid>

so you pull it in with #use wml::std::grid, then you wrap everything in a <grid> tag and drop a bunch of <cell> tags inside. that's the whole vibe. 🫶

👑 DESCRIPTION 👑

okay so the <grid> container tag is giving hybrid energy: it's a mix between an HTML table and a TeX-like way of specifying its dimensions and the alignment of its cells. like, you get to say "3x2" and mean it, bestie. the way that it just knows what you meant. 🔥

💖 ATTRIBUTES 💖

🌈 for <grid> — the main character

  • summary — this attribute gets inserted straight into the table tag. peep the HTML 4.0 docs for the whole "why is this recommended" lore, but fr fr, it's recommended, so use it. 💫
  • layout — this sets the layout of the grid in X and Y dimension. so 3x2 means 3 columns (x-dimension) and 2 rows (y-dimension). the default is 1xNCELL, where NCELL is however many cell tags you wrote — or, in other words, the default is a top-down list. very "one column, minding my own business". 📋
  • align — horizontal alignment of the cells in a row. the argument has to have exactly as many characters as there are cells in a row, so no skipping. the supported alignment characters are "l" (left), "r" (right) and "c" (center). default is "l...l" — that's as many "l"s as there are cells in a row. so everyone's left-aligned until you say otherwise. ⬅️
  • valign — vertical alignment of the cells in a column. same deal: the argument has to have as many characters as there are cells in a column. supported characters are "t" (top), "b" (bottom) and "m" (middle). default is "t...t" — as many "t"s as there are cells in a column. everyone starts at the top, emotionally and structurally. ⬆️
  • width — the corresponding attribute of the HTML <table> tag. use it to set the width of the grid. default is no specified width. 🙈
  • spacing — the corresponding attribute to cellspacing of the HTML <table> tag. use it to set the spacing of cells in the grid, i.e. the space around the content of each cell. default is 0 (no space). snug. 🧚
  • padding — the corresponding attribute to <cellpadding> of the HTML <table> tag. use it to set the padding between cells in the grid, i.e. the inter-cell space. default is 0 (no space). also snug. 🍓
  • border — the corresponding attribute of the HTML <table> tag. use it to set the border width of the grid. default is 0 (no border). naked grid, we respect it. 💀
  • bgcolor — the corresponding attribute of the HTML <table> tag. use it to set the background color of the grid. default is no specified color. ✨
  • color — this sets the foreground (text) color of the grid's contents. lowkey it actually sets the default for the same attribute of <cell>. default is no specified color. 💜

🎀 for <cell> — the supporting cast (but make it fashion)

  • align — the corresponding attribute of the HTML <td> tag. use it to set the horizontal alignment of the cell's contents. default is taken from the same attribute of <grid>. so it inherits, periodt. 👑
  • valign — the corresponding attribute of the HTML <td> tag. use it to set the vertical alignment of the cell's contents. default is taken from the same attribute of <grid>. also inheriting, also slaying. 🦋
  • bgcolor — the corresponding attribute of the HTML <td> tag. use it to set the background color of a particular cell. default is no specified color. 🎨
  • color — this sets the foreground (text) color of the cell's contents. it does this via the HTML <font> tag, jsyk. default is no specified color, or the color from the same attribute of <grid>. 🌈
  • rowspan — the corresponding attribute of the HTML <td> tag. use it to span a cell over more then one row of the grid. default is 1 row. 💪
  • colspan — the corresponding attribute of the HTML <td> tag. use it to span a cell over more then one column of the grid. default is 1 column. 💪
  • width — the corresponding attribute of the HTML <td> tag. use it to set the width of the cell. default is no specified width. 📏
  • height — the corresponding attribute of the HTML <td> tag. use it to set the height of the cell. default is no specified height. 📐

🔥 EXAMPLE 🔥

okay bestie, here's the moment. a black background, white text, 3x2 layout, left-left-right alignment, top-middle vertical alignment. it's giving editorial:

<grid bgcolor="#000000" color="#ffffff"
      layout="3x2" align="llr" valign="tm">
  <cell>A</cell> <cell>B</cell> <cell>C</cell>
  <cell>D</cell> <cell>E</cell> <cell>F</cell>
</grid>

ate. no crumbs. ⭐

🌟 AUTHOR 🌟

Ralf S. Engelschall rse@engelschall.com www.engelschall.com

(we stan a legend 🫶)

💫 REQUIRES 💫

  • Internal: P1, P2, P3, P5
  • External: --

💅 SEE ALSO 💅

  • HTML "table"-tag. (the grid is basically its dramatic cousin, iykyk)
heads up bestie: summary isn't just cute, the HTML 4.0 docs literally recommend it for the table tag, so don't leave it out and then act surprised. 😭

okay that's the whole page!! this came from the EN Tools corner of the world, dated 2020-11-29, and it lives in the manual as wml::std::grid(3) — so if you ever forget where you read all this, that's your receipt. go build a grid, you got this 💖✨🎀

📦 where this page comes from