Generating CSS Grid Layout From Plain Text

Using JavaScript and CSS Variables

“Person in a coat stands near a shiny silver wall in a grid pattern” by Oladimeji Odunsi on Unsplash

Background

These days there are many sophisticated tools to create web page layouts. I have always preferred to start with a plain ASCII text based layout and convert it into HTML. For long I have been contemplating writing a tool to convert an ASCII text based grid layout into web page layout. Recently I came across a wonderful tool called ASCIIFlow using which web page layouts can be quickly drawn in plain ASCII text. Below is a sample (and simple) layout (The ‘Holy Grail’ layout):

The layout is built using four simple ASCII characters — horizontal borders use hyphens (-), vertical borders use pipe character (|), border intersections are marked by plus (+) symbols, and inside areas of the grid are shown by spaces.

NOTE: I have noticed that sometimes ASCIIFlow fails to add ‘+’ sign at border intersections. In such cases you have to manually add ‘+’ signs at such intersections for our logic below to work.

Our goal is to covert an ASCII text layout like the one above into a web page layout like this: