Core 1 Interaction

October 24, 2023

L8: CSS Grid

The final CSS layouting piece, CSS Grid.


We’re going to build a current version of the classic Holy Grail layout together with CSS Grid.

Let’s start with this DOM, to get us going:

<!DOCTYPE html>
    <title>Entry 5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <header id="top">
      <h1>Entry 5</h1>
      <a href="../">All entries</a>
        <li><a href="#first">Producing meaning</a></li>
        <li><a href="#second">Cultural authenticity </a></li>
        <li><a href="#third">Performance spectre</a></li>
      <h2 id="first">Producing meaning</h2>
      <p>Sustainable authoritarian institutional historical mass-produced intuitive utopia collage dogmatic. Ethnicity intimate art gender cultural authenticity the Canon consumer politics fragments interplay. Male gaze contemplation gendering consumerist memory pop art fabrication. Internal construct observers loss R. Mutt digital manifesto material. Performance consumption political interpretation authoritarian relational body art male-dominated.</p>
      <p>Homogenized media revelatory street art existence experimental phenomenon. Imitation graffiti displacement bodily experience repurposed materials navigate natural. Collective historicizing dogma violence .net art industrial translates displacement. Zine filmic male gaze disrupt martyr modern gallery space universal experience ethnography.</p>
      <h2 id="second">Cultural authenticity</h2>
      <p>Meditate sustainable social justice female form appropriate Marina Abramovic subculture tokenism. Sentient kitsch boundaries alienation psychic sensuality ethnicity. Poetic non-white absence utilitarian revelatory gallery space meta chaos. Emerge self-identify process lived experience collaborative popular culture blurred viewpoint new technologies.</p>
      <p>Heritage nothingness experiential body art politics blurred utopia. Duchamp cliché postmodern modern process erotica virtual reality reclaiming history. Experiential destabilize ritual utilitarian Fluxus ghosts horror. Imagination figment social dynamic contrast transformation normative real progress.</p>
      <h2 id="third">Performance spectre</h2>
      <p>Memory ethnicity community engagement revelatory impulsive handmade cliché inclusive artifacts. Consumerist outsider subversive mythology genius form poetic. Discipline embodiment pastiche mind's eye digital origin ethnicity cabinet of curiousities community engagement. Trans institutional chaos navigate consumerist mythology fetish eroticism utopia.</p>
      <p>Re-purposed materials normative mind's eye everyday explore love reclaimed materials observe awareness. Producing meaning conformity ready-made globalization spiritual misappropriated man-made interpersonal. Difference contrast producing meaning artifacts meta bespoke Glitch Art. Digital hyperspace loss conventional criticizes contemplation institutional Fountain.</p>
      <h2>Institutional narrative</h2>
      <p>Internet explore gendering destabilize alternative individual sexist. Institutional narrative authentic blurred individual new media pop art. Psychic Keith Haring appropriate abstract Fluxus plurality interactive revelatory interrogates. History cultural authenticity contemplation future seeing technology street art sexual politics represents. Fountain misappropriated controversy existential racial politics universal unique perspective sensuality.</p>
      <a href="#top">Top</a>

We’re going to do this “live” (so I won’t write out all the steps), but here is our agenda:

Entry Review

Let’s take a look at some of your entries for this week. Today in groups of four. Please form groups show and critique and help each other out. I will meet with each group.

Sign up here.


  1. Study the CSS Grid lecture.
  2. Complete the 7th entry for your Harmonic Collection.
  3. Read Taeyoon Choi's, What is Poetic about Computation?