# Uneven grid layout in Makie.jl
**URL:** https://discourse.julialang.org/t/uneven-grid-layout-in-makie-jl/84208
**Category:** Visualization
**Tags:** makie
**Created:** [July 14, 2022, 7:12am UTC](https://discourse.julialang.org/t/uneven-grid-layout-in-makie-jl/84208 "2022-07-14T07:12:10Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@Kevin\_Kleinbeck](https://discourse.julialang.org/u/Kevin_Kleinbeck)
#### Post date: [July 14, 2022, 7:12am UTC](https://discourse.julialang.org/t/uneven-grid-layout-in-makie-jl/84208/1 "2022-07-14T07:12:10Z")
Hello everyone,
I try to great a two row figure in Makie, where the first row contains 3 `Axis` elements and the second row only two and the plot legend.
Sadly, I cannot figure out the logic behind Makie’s layout algorithm.
First consider the MWE:
```julia
function makeFigure()
fig = Figure(resolution = (300, 200), fontsize = 12, figure_padding = 2)
Axis(fig[1,1:2])
Axis(fig[1,3:4])
Axis(fig[1,5:6])
Axis(fig[2,2:3])
Axis(fig[2,4:5])
Box( fig[2,6])
colgap!(fig.layout, Relative(0.02))
fig
end
```
Which results in the figure
For some reasons Makie thinks it is cool that the upper right Axis has a different width than the other two in the top row. This happens also if I do not include the Box (which should be the legend later) or use `for n ∈ 1:6 colsize!(fig.layout, n, Relative(1/6)) end`
My second approach went along the line of:
```julia
function makeFigure()
fig = Figure(resolution = (300, 200), fontsize = 12, figure_padding = 2)
Axis(fig[1,1:2])
Axis(fig[1,3:4])
Axis(fig[1,5:6])
Axis(fig[2,:][1,2:3])
Axis(fig[2,:][1,4:5])
Box( fig[2,:][1,6])
colgap!(fig.layout, Relative(0.02))
fig
end
```
i.e., using a subgrip for the lower row.
This results in
Problem: There seems to be no way to set `colgap` for subgrids and also the width of the lower axis is uncorrelated to the ones from the top row.
How can I convince Makie to simply put all Axis into the same width?
---
### Author:  [@jules](https://discourse.julialang.org/u/jules)
#### Post date: [July 14, 2022, 7:43am UTC](https://discourse.julialang.org/t/uneven-grid-layout-in-makie-jl/84208/2 "2022-07-14T07:43:41Z")
> [@Kevin\_Kleinbeck](#):
>
> How can I convince Makie to simply put all Axis into the same width?
This is actually more tricky than you might think at first. The reason why your top-right axis is smaller is that the other two both need to include the width of the y-axis decorations of the lower axes. The Box doesn’t have that. The space in the layout is distributed equally between the elements only based on the _inner_ size of the objects. The thing is that you conflate inner area of the top-row elements with outer area of the bottom-row elements. Actually all columns have the same size:
```julia
fig = Figure(resolution = (300, 200), fontsize = 12, figure_padding = 2)
Axis(fig[1,1:2])
Axis(fig[1,3:4])
Axis(fig[1,5:6])
Axis(fig[2,2:3])
Axis(fig[2,4:5])
Box( fig[2,6])
colgap!(fig.layout, Relative(0.02))
for i in 1:6
Box(fig[:, i], color = (:red, 0.2), strokewidth = 0)
end
fig
```
So the intuition to put the lower row into a nested GridLayout is good, but then the two layouts don’t know anything about each other and therefore the automatic distribution of column widths is uneven.
This kind of “shifted” layout where you as a human know about some relationship between widths is not easy to represent for an automatic grid-based algorithm. But you can help out with your knowledge. If you’re sure that the legend will be less wide than one of the three subplots in the upper row, you can be sure that if you manually set the lower two axes to the width of the upper ones, the lower row will still fit. You can get the current inner size of an axis by looking at the `px_area` Observable of its `Scene` (the inner plot area). That is of course a bit of internal knowledge and might break later, but for custom plotting it’s always good to know your way around the internals a bit.
So here I derive the width setting for the lower two axes by the px\_area of the top-left axis (all three are the same anyway). I give the legend box a fixed width as that simulates the legend better. The lower row can be put into a separate GridLayout so the columns are free relative to row 1. The lower GridLayout will be fixed in width if the two axes and the legend have known width, so it will center itself in the available space by default. You can set `halign` on it to `:left` or `:right` if you like that better.
```julia
fig = Figure(resolution = (300, 200), fontsize = 12, figure_padding = 6)
ax1 = Axis(fig[1,1])
Axis(fig[1,2])
Axis(fig[1,3])
# create a width observable from the first axis' inner area
w = @lift widths($(ax1.scene.px_area))[1]
subgl = GridLayout(fig[2, :])
Axis(subgl[1, 1], width = w)
Axis(subgl[1, 2], width = w)
Box(subgl[1, 3], width = 30)
colgap!(fig.layout, 5)
rowgap!(fig.layout, 10)
colgap!(subgl, 5)
fig
```
