Grid
Using the shortcode ll-grid allows you to layout content in a grid. There are a range of display options available.
Note that each element with the tag will be treated as another grid item. Wrap content in div tags if required and watch out for empty <p> tags and stray <br> tags wordpress is prone to generate.
Basic grid
Items are stacked on smaller screens (< 768px). After this size, two columns are displayed.
1. Analyse your topic
look at assignment brief instructions for focus
research directions and structure
2. Brainstorm the topic to
bring all ideas together
start with what you already know
3. Research the gaps
general reading
note-taking
develop information
4. Plan a coherent structure
brainstorm ideas. What do you already know?select and evaluate evidence from readingcreate a mindmap
organise your research and ideas
[ll-grid]
[ll-card title="Title 1"] ... [/ll-card]
[ll-card title="Title 2"] ... [/ll-card]
[ll-card title="Title 3"] ... [/ll-card]
[ll-card title="Title 4"] ... [/ll-card]
[/ll-grid]3 column grids
Items are stacked on smaller screens (< 768px). After this size, three columns are displayed.
1. Analyse your topic
look at assignment brief instructions for focus
research directions and structure
2. Brainstorm the topic to
bring all ideas together
start with what you already know
3. Research the gaps
general reading
note-taking
develop information
4. Plan a coherent structure
brainstorm ideas. What do you already know?select and evaluate evidence from readingcreate a mindmap
organise your research and ideas
[ll-grid columns="3"]
[ll-card title="Title 1"] ... [/ll-card]
[ll-card title="Title 2"] ... [/ll-card]
[ll-card title="Title 3"] ... [/ll-card]
[ll-card title="Title 4"] ... [/ll-card]
[ll-card title="Title 5"] ... [/ll-card]
[ll-card title="Title 6"] ... [/ll-card]
[/ll-grid]4 column grids
4 columns are only displayed at screen sizes greater than 992px. At smaller screens, it behaves as the basic, default grid does.
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper.
Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper.
Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper.
Item 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper.
Item 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper.
Item 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper.
[ll-grid columns="4"]
[ll-card title="Title 1"] ... [/ll-card]
[ll-card title="Title 2"] ... [/ll-card]
[ll-card title="Title 3"] ... [/ll-card]
[ll-card title="Title 4"] ... [/ll-card]
[/ll-grid]Other options
It's possible to increase the gap betweeen grid items by adding gap="lg".
1. Analyse your topic
look at assignment brief instructions for focus
research directions and structure
2. Brainstorm the topic to
bring all ideas together
start with what you already know
3. Research the gaps
general reading
note-taking
develop information
4. Plan a coherent structure
brainstorm ideas. What do you already know?select and evaluate evidence from readingcreate a mindmap
organise your research and ideas
[ll-grid gap="lg"]
[ll-card title="Title 1"] ... [/ll-card]
[ll-card title="Title 2"] ... [/ll-card]
[/ll-grid]By default, grids occupy the whole width of the column. It's possible to adjust the max width, using a size attribute of either sm, md or lg:
Attribute
max-width
size="lg"640px
size="md"400px
size="sm"296px
Here's an example of three short lists which would otherwise require a bit of scrolling:
[ll-grid columns="3" size="lg"]
<div><p>html content here</p></div>
<div><p>html content here</p></div>
<div><p>html content here</p></div>
[/ll-grid]
